@drivy/cobalt 1.1.2 → 1.1.4

package/styles/components/Form/form.scss

@@ -1,22 +1,20 @@
 @mixin form-input-base($container) {
-  @include text-color(base);
-  @include border(strongInteractive);
-  @include bg-color(secondary);
+  @apply c-text-base c-border-strongInteractive c-bg-secondary;
   @include withContext(#{$container}--success) {
-    @include border-color(success);
+    @apply c-border-success;
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {
-      @include border(success);
+      @apply c-border-success;
     }
   }
 
   @include withContext(#{$container}--error) {
-    @include border-color(error);
+    @apply c-border-error;
 
     &:not(:disabled):hover,
     &:not(:disabled):focus {
-      @include border(error);
+      @apply c-border-error;
     }
   }
 
@@ -36,13 +34,13 @@
   transition: border-color 150ms ease-in-out;
 
   &:not(:disabled):not(:read-only):hover {
-    @include text-color(base);
+    @apply c-text-base;
 
     box-shadow: elevation(base);
   }
 
   &:not(:disabled):not(:read-only):focus {
-    @include border(accent, 2);
+    @apply c-border-accent c-border-2;
 
     outline: none;
   }
@@ -57,9 +55,7 @@
 
   &:disabled,
   &:not(select):read-only {
-    @include border-color(base);
-    @include text-color(subdued);
-    @include bg-color(neutral);
+    @apply c-border-base c-text-subdued c-bg-neutral;
   }
 
   &:disabled {

package/styles/components/Helper/index.scss

@@ -1,17 +1,12 @@
 .cobalt-helper {
-  @include border(base);
-  @include bg-color(secondary);
-  padding: spacing(sm);
-
-  border-radius: border-radius(xl);
+  @apply c-border c-border-base c-bg-secondary c-rounded-xl;
+  padding: theme("spacing.sm");
 
   &__title {
-    @include c-text-title-sm;
-    @include text-color(base);
+    @apply c-text-title-sm c-text-base;
   }
 
   &__content {
-    margin-top: spacing(xs);
-    margin-bottom: spacing(sm);
+    @apply c-mt-xs c-mb-sm;
   }
 }

package/styles/components/Icon/index.scss

@@ -24,12 +24,10 @@
   }
 
   &Icon--contained {
-    @include bg-color(neutralAlt);
+    @apply c-bg-neutralAlt c-rounded-lg;
     height: 40px;
     width: 40px;
     padding: math.div(40px - 24px, 2);
-
-    border-radius: border-radius(lg);
   }
 
   &Icon--size16 {
@@ -42,7 +40,7 @@
 
       padding: math.div(28px - 16px, 2);
 
-      border-radius: border-radius(md);
+      @apply c-rounded-md;
     }
   }
 
@@ -56,7 +54,7 @@
 
       padding: math.div(32px - 20px, 2);
 
-      border-radius: border-radius(md);
+      @apply c-rounded-md;
     }
   }
 
@@ -70,7 +68,7 @@
 
       padding: math.div(52px - 32px, 2);
 
-      border-radius: border-radius(lg);
+      @apply c-rounded-lg;
     }
   }
 

package/styles/components/Pagination/index.scss

@@ -1,7 +1,7 @@
 .cobalt-pagination {
+  @apply c-gap-xs;
   display: flex;
   justify-content: center;
-  gap: spacing(xs);
 }
 
 .cobalt-pagination__DefaultButton {

package/styles/components/PhotoDropzone/index.scss

@@ -1,8 +1,9 @@
 .cobalt-photo-dropzone {
-  @include bg-color(neutralAlt);
-  @include border(accentAlt, default, dashed);
+  @apply c-bg-neutralAlt c-border c-border-accentAlt c-rounded-xl;
   position: relative;
 
+  border-style: dashed;
+
   display: flex;
   align-items: center;
   justify-content: center;
@@ -12,7 +13,6 @@
 
   text-align: center;
 
-  border-radius: border-radius(xl);
   cursor: pointer;
 
   transition: background-color 0.25s;
@@ -31,7 +31,7 @@
 }
 
 .cobalt-photo-dropzone--dragging {
-  @include bg-color(accentAlt);
+  @apply c-bg-accentAlt;
 
   transition: background-color 0.25s;
 
@@ -42,16 +42,14 @@
 }
 
 .cobalt-photo-dropzone--loading {
-  @include bg-color(neutral);
-  @include text-color(accent);
+  @apply c-bg-neutral c-text-accent;
   border-style: solid;
 
   cursor: default;
 }
 
 .cobalt-photo-dropzone--errored {
-  @include bg-color(neutral);
-  @include border-color(error);
+  @apply c-bg-neutral c-border-error;
   border-style: solid;
 }
 
@@ -63,7 +61,7 @@
 }
 
 .cobalt-photo-dropzone__description--strong {
-  @include text-color(accent);
+  @apply c-text-accent;
   font-weight: 700;
 }
 
@@ -71,12 +69,12 @@
   width: 100%;
   height: 100%;
 
-  border-radius: border-radius();
+  @apply c-rounded;
   object-fit: cover;
 }
 
 .cobalt-photo-dropzone__delete-button {
-  @include bg-color(neutralAlt);
+  @apply c-bg-neutralAlt c-rounded-full;
   position: absolute;
   bottom: 1rem;
   right: 1rem;
@@ -86,7 +84,6 @@
 
   border: 0;
 
-  border-radius: border-radius(full);
   cursor: pointer;
   opacity: 0;
 

package/styles/components/Pill/index.scss

@@ -1,52 +1,42 @@
 $pill-height: 28px;
-$group-item-spacing: spacing(xs);
 
 .cobalt- {
   &Pill {
-    @include bg-color(neutralAlt);
-    @include text-color(base);
+    @apply c-bg-neutralAlt c-text-base c-rounded-full c-py-2xs c-px-sm;
     display: inline-flex;
     align-items: center;
 
     height: $pill-height;
-    padding: spacing("2xs") spacing(sm);
 
     font-size: 13px;
     white-space: nowrap;
-
-    border-radius: $pill-height;
   }
 
   &Pill--large {
+    @apply c-py-xs c-px-md;
     $pill-height: 40px;
     height: $pill-height;
-    padding: spacing(xs) spacing(md);
-
-    border-radius: $pill-height;
   }
 
   &Pill--colorConnect {
-    @include text-color(connect);
+    @apply c-text-connect;
   }
 
   &Pill--overlayed {
-    @include bg-color(accentAlt);
-    @include text-color(accentAlt);
+    @apply c-bg-accentAlt c-text-accentAlt;
   }
 
   &Pill__Icon {
-    margin-right: spacing("2xs");
+    @apply c-mr-2xs;
   }
 
   &PillGroup {
-    margin-top: (-1 * $group-item-spacing);
-    margin-left: (-1 * $group-item-spacing);
+    @apply c--mt-xs c--ml-xs;
   }
 
   &PillGroup__Item {
+    @apply c-mt-xs c-ml-xs;
     display: inline-block;
-    margin-top: $group-item-spacing;
-    margin-left: $group-item-spacing;
 
     vertical-align: top;
   }

package/styles/components/PlateNumber/index.scss

@@ -1,7 +1,5 @@
 .cobalt-plate-number {
-  @include border(base);
-  @include bg-color(primary);
-  @include text-color(base);
+  @apply c-border-base c-bg-primary c-text-base c-rounded c-py-[2px] c-px-2xs;
 
   display: inline-flex;
 
@@ -9,8 +7,6 @@
 
   height: 20px;
 
-  padding: 2px spacing("2xs");
-
   font-family: font-family(base);
 
   font-size: 14px;
@@ -19,7 +15,5 @@
 
   line-height: 14px;
 
-  border-radius: border-radius();
-
   letter-spacing: normal;
 }

package/styles/components/Popover/index.scss

@@ -4,35 +4,36 @@
 
 [data-theme~="cobalt-popover"] {
   &.tippy-box {
-    @include bg-color(secondary);
-    @include text-color(base);
-
-    box-shadow: elevation(lg);
-
-    border-radius: border-radius(lg);
+    @apply c-bg-secondary c-text-base c-shadow-lg c-rounded-lg;
   }
 
   .tippy-content {
     padding: 0;
     min-width: 16rem;
 
-    border-radius: border-radius(lg);
+    @apply c-rounded-lg;
   }
 
   &[data-placement^="top"] > .tippy-arrow::before {
-    border-top-color: color-var(background, secondary) !important;
+    border-top-color: var(--theme-semanticBackgroundColor-secondary) !important;
   }
 
   &[data-placement^="bottom"] > .tippy-arrow::before {
-    border-bottom-color: color-var(background, secondary) !important;
+    border-bottom-color: var(
+      --theme-semanticBackgroundColor-secondary
+    ) !important;
   }
 
   &[data-placement^="left"] > .tippy-arrow::before {
-    border-left-color: color-var(background, secondary) !important;
+    border-left-color: var(
+      --theme-semanticBackgroundColor-secondary
+    ) !important;
   }
 
   &[data-placement^="right"] > .tippy-arrow::before {
-    border-right-color: color-var(background, secondary) !important;
+    border-right-color: var(
+      --theme-semanticBackgroundColor-secondary
+    ) !important;
   }
 }
 
@@ -44,27 +45,27 @@
 
 [data-theme~="cobalt-popover--withArrow"] {
   &.tippy-box {
-    border-radius: border-radius(xl);
+    @apply c-rounded-xl;
   }
 
   .tippy-content {
-    border-radius: border-radius(xl);
+    @apply c-rounded-xl;
   }
 }
 
 .cobalt-popover--bodySpacing {
-  padding: spacing(md);
+  padding: theme("spacing.md");
 }
 
 .use-cobalt-dark-theme {
   [data-theme~="cobalt-popover"] {
-    box-shadow: 0 0 0 1px color-var(stroke, base);
+    box-shadow: 0 0 0 1px var(--theme-semanticBorderColor-base);
 
     &[data-placement^="top"] > .tippy-arrow {
       bottom: -1px;
 
       &::before {
-        border-top-color: color-var(stroke, base) !important;
+        border-top-color: var(--theme-semanticBorderColor-base) !important;
       }
     }
 
@@ -72,7 +73,7 @@
       top: -1px;
 
       &::before {
-        border-bottom-color: color-var(stroke, base) !important;
+        border-bottom-color: var(--theme-semanticBorderColor-base) !important;
       }
     }
 
@@ -80,7 +81,7 @@
       right: -1px;
 
       &::before {
-        border-left-color: color-var(stroke, base) !important;
+        border-left-color: var(--theme-semanticBorderColor-base) !important;
       }
     }
 
@@ -88,7 +89,7 @@
       left: -1px;
 
       &::before {
-        border-right-color: color-var(stroke, base) !important;
+        border-right-color: var(--theme-semanticBorderColor-base) !important;
       }
     }
   }

package/styles/components/PriceTable/index.scss

@@ -1,17 +1,18 @@
 .cobalt- {
   &PriceTable__Row {
-    @include c-text-body-md;
+    @apply c-text-body-md;
 
     display: flex;
     justify-content: space-between;
 
     &:not(:last-child) {
-      margin-bottom: spacing(sm);
+      @apply c-mb-sm;
     }
   }
 
   &PriceTable__Label {
-    margin-right: spacing("2xs");
+    @apply c-mr-2xs;
+
     width: 100%;
   }
 
@@ -20,11 +21,11 @@
     white-space: nowrap;
 
     &--discount {
-      @include text-color(success);
+      @apply c-text-success;
     }
 
     &:empty:before {
-      @include text-color(subdued);
+      @apply c-text-subdued;
       font-weight: normal;
 
       content: "—";

package/styles/components/ProgressBanner/index.scss

@@ -1,46 +1,34 @@
 .cobalt-progressBanner {
-  @include bg-color(info);
-  @include text-color(info);
+  @apply c-bg-info c-text-info c-rounded-xl c-p-sm c-gap-sm;
 
   display: inline-flex;
   align-items: center;
 
-  padding: spacing(sm);
-
-  border-radius: border-radius(xl);
-
-  gap: spacing(sm);
-
   &__progress-container {
     font-weight: 600;
   }
 
   &__completed-icon-container {
-    @include bg-color(primary);
+    @apply c-bg-primary c-rounded-full c-w-xl c-h-xl;
 
     display: flex;
 
     justify-content: center;
     align-items: center;
 
-    width: spacing(xl);
-    height: spacing(xl);
-
     margin: 0 5px; // ProgressCircular stroke width
 
     flex-shrink: 0;
-
-    border-radius: 50%;
   }
 
   &__text-container {
+    @apply c-gap-2xs;
     display: flex;
     flex-direction: column;
-    gap: spacing("2xs");
   }
 
   &__title {
-    @include c-text-title-xs;
+    @apply c-text-title-xs;
   }
 
   &__description {
@@ -48,8 +36,7 @@
   }
 
   &--completed {
-    @include bg-color(successAlt);
-    @include text-color(successAlt);
+    @apply c-bg-successAlt c-text-successAlt;
   }
 
   &__completed-icon-container--animated .cobalt-Icon {

package/styles/components/ProgressBar/index.scss

@@ -6,53 +6,43 @@
   }
 
   &ProgressBar__Progression {
-    @include c-text-title-md;
-    @include text-color(infoAlt);
+    @apply c-text-title-md c-text-infoAlt;
   }
 
   &ProgressBar__Title {
-    @include c-text-title-sm;
-    @include text-color(base);
+    @apply c-text-title-sm c-text-base;
   }
 
   &ProgressBar__CompletedCheckbox {
     path {
-      @include fill-color(secondary);
+      fill: theme("semanticFillColor.secondary");
     }
   }
 
   &ProgressBar__Container {
-    @include fill-bg-color(subdued);
+    @apply c-bg-fill-subdued c-rounded c-mt-sm c-h-2xs;
     position: relative;
 
-    margin-top: spacing(sm);
-
-    height: spacing("2xs");
     width: 100%;
 
     border-radius: 2px;
   }
 
   &ProgressBar__Foreground {
-    @include fill-bg-color(secondary);
+    @apply c-bg-fill-secondary c-rounded c-h-2xs;
     position: absolute;
     left: 0;
     top: 0;
 
-    height: spacing("2xs");
-
     border-radius: 2px;
   }
 
   &ProgressBar__Tick {
-    @include fill-bg-color(secondary);
+    @apply c-bg-fill-secondary c-rounded c-w-2xs c-h-sm;
     position: absolute;
     top: -6px;
     right: 0;
 
-    height: 4 * spacing("2xs");
-    width: spacing("2xs");
-
     border-radius: 2px;
   }
 }

package/styles/components/ProgressCircular/index.scss

@@ -1,7 +1,7 @@
 .cobalt-circularProgressBar {
   --content-size: 64px;
   --total-size: calc((var(--content-size) / 4) + var(--content-size));
-  --progress-color: #{color-var(fill, base)};
+  --progress-color: var(--theme-semanticFillColor-base);
 
   position: relative;
 
@@ -36,7 +36,7 @@
   }
 
   &__content {
-    @include bg-color(primary);
+    @apply c-bg-primary;
 
     position: absolute;
 
@@ -72,14 +72,14 @@
   }
 
   &--info {
-    --progress-color: #{color-var(fill, secondary)};
+    --progress-color: var(--theme-semanticFillColor-secondary);
   }
 
   &--error {
-    --progress-color: #{color-var(fill, error)};
+    --progress-color: var(--theme-semanticFillColor-error);
   }
 
   &--success {
-    --progress-color: #{color-var(fill, success)};
+    --progress-color: var(--theme-semanticFillColor-success);
   }
 }

package/styles/components/Rating/index.scss

@@ -10,7 +10,7 @@
 }
 
 .cobalt-rating__label {
-  @include text-color(subdued);
+  @apply c-text-subdued;
   line-height: 14px;
   font-size: 14px;
 }
@@ -36,8 +36,7 @@
   }
 
   &--icon-size-48 .cobalt-Icon {
-    height: spacing(xl);
-    width: spacing(xl);
+    @apply c-h-xl c-w-xl;
   }
 
   &__icon-wrapper {
@@ -81,8 +80,8 @@
   &:not(:hover):not(:focus-visible) input:focus {
     // focus feedback with keyboard navigation only
     & + .cobalt-Icon {
-      @include border(accent);
-      border-radius: spacing("2xs");
+      @apply c-border-accent;
+      border-radius: theme("spacing.2xs");
     }
   }
 

package/styles/components/Sidepanel/index.scss

@@ -1,11 +1,11 @@
 .cobalt-sidepanel {
-  @include bg-color(primary);
+  @apply c-bg-primary;
 
   position: fixed;
 
   top: 0;
   right: 0;
-  z-index: zx(sidepanel);
+  z-index: theme("zIndex.sidepanel");
 
   height: 100vh;
 
@@ -26,7 +26,7 @@
   }
 
   &--visible {
-    box-shadow: elevation(lg);
+    @apply c-shadow-lg;
   }
 }
 
@@ -36,7 +36,7 @@
   top: 0;
   left: 0;
 
-  z-index: zx(sidepanel-below);
+  z-index: theme("zIndex.sidepanel-below");
 
   background-color: fade-out(black, 0.2);