@drivy/cobalt 1.1.3 → 1.1.4

package/styles/components/Form/Hint.scss

@@ -1,13 +1,9 @@
 .cobalt- {
   &Hint {
-    @include text-color(subdued);
-    @include c-text-body-md;
+    @apply c-text-subdued c-text-body-md c-mt-xs c-ml-[1px];
 
     position: relative;
 
-    margin-top: spacing(xs);
-    margin-left: 1px;
-
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
@@ -20,15 +16,15 @@
       justify-content: center;
       align-items: flex-start;
       flex-shrink: 0;
-      margin-right: spacing(xs);
+      @apply c-mr-xs;
     }
 
     &--success {
-      @include text-color(success);
+      @apply c-text-success;
     }
 
     &--error {
-      @include text-color(error);
+      @apply c-text-error;
     }
   }
 }

package/styles/components/Form/RadioWithDetails.scss

@@ -9,9 +9,7 @@
   --visual-radio-size: 18px;
 
   .cobalt-radio-with-details__inner {
-    @include border(baseInteractive);
-    @include text-color(base);
-    @include bg-color(secondary);
+    @apply c-border-baseInteractive c-text-base c-bg-secondary;
     height: 100%;
     display: flex;
     flex-direction: row;
@@ -20,7 +18,7 @@
     padding: spacing(sm);
 
     cursor: pointer;
-    border-radius: border-radius(lg);
+    @apply c-rounded-lg;
 
     transition: all 120ms ease-in-out;
 
@@ -41,7 +39,7 @@
   }
 
   .cobalt-radio-with-details__title {
-    @include text-color(base);
+    @apply c-text-base;
     font-size: 14px;
     font-weight: 600;
     line-height: 20px;
@@ -50,7 +48,7 @@
   }
 
   .cobalt-radio-with-details__description {
-    @include text-color(subdued);
+    @apply c-text-subdued;
     font-family: font-family(base);
     font-size: 14px;
     line-height: 20px;
@@ -65,7 +63,7 @@
     white-space: nowrap;
 
     & + #{ $self }__inner #{ $self }__visual-input {
-      @include border(accent, 2);
+      @apply c-border-accent c-border-2;
       position: relative;
       top: 3px;
 
@@ -79,7 +77,7 @@
 
       box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
 
-      border-radius: 50%;
+      @apply c-rounded-full;
       cursor: pointer;
 
       transition: border-color 150ms ease-in-out;
@@ -93,9 +91,7 @@
     }
 
     &:checked + #{ $self }__inner {
-      @include border-color(accent);
-      @include text-color(accentAlt);
-      @include bg-color(accentAlt);
+      @apply c-border-accent c-text-accentAlt c-bg-accentAlt;
     }
 
     &:checked + #{ $self }__inner .cobalt-Icon {
@@ -103,7 +99,7 @@
     }
 
     &:checked + #{ $self }__inner .cobalt-contained-icon {
-      @include bg-color(accentAlt);
+      @apply c-bg-accentAlt;
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input {
@@ -112,19 +108,18 @@
 
     &:checked + #{ $self }__inner #{ $self }__title,
     &:checked + #{ $self }__inner #{ $self }__description {
-      @include text-color(accentAlt);
+      @apply c-text-accentAlt;
     }
 
     & + #{ $self }__inner #{ $self }__visual-input::after {
-      @include border(accent);
-      @include bg-color(accentAlt);
+      @apply c-border-accent c-bg-accentAlt;
       left: 2px;
       top: 2px;
 
       // Execption for radio inputs
       border-width: 5px;
 
-      border-radius: 50%;
+      @apply c-rounded-full;
       content: "";
       opacity: 0;
 

package/styles/components/Form/Select.scss

@@ -11,7 +11,7 @@
     &__Input {
       @include form-input-base($self);
 
-      padding-right: spacing(lg);
+      @apply c-pr-lg;
 
       line-height: 20px;
 
@@ -26,7 +26,7 @@
 
       // select placeholder
       &:invalid {
-        @include text-color(subdued);
+        @apply c-text-subdued;
         opacity: 0.7;
       }
 

package/styles/components/Form/Stepper.scss

@@ -18,11 +18,11 @@
     }
 
     &__ContentWrapper {
-      @include text-color(base);
+      @apply c-text-base c-my-none c-mx-sm;
       display: flex;
       justify-content: center;
       align-items: center;
-      margin: 0 spacing(sm);
+
       min-width: 96px;
 
       font-size: 32px;
@@ -30,8 +30,7 @@
     }
 
     &__Meta {
-      @include text-color(subdued);
-      margin-left: spacing(xs);
+      @apply c-text-subdued c-ml-xs;
 
       font-size: 15px;
     }
@@ -50,7 +49,7 @@
 
       font-size: 18px;
 
-      border-radius: border-radius(lg);
+      @apply c-rounded-lg;
       user-select: none;
 
       &:focus {
@@ -65,19 +64,19 @@
 
     &--disabled {
       .cobalt-Stepper__ContentWrapper {
-        @include text-color(subdued);
+        @apply c-text-subdued;
       }
     }
 
     &--success {
       .cobalt-Stepper__ContentWrapper {
-        @include text-color(success);
+        @apply c-text-success;
       }
     }
 
     &--error {
       .cobalt-Stepper__ContentWrapper {
-        @include text-color(error);
+        @apply c-text-error;
       }
     }
   }

package/styles/components/Form/TextArea.scss

@@ -20,20 +20,20 @@
       resize: vertical;
 
       &::placeholder {
-        @include text-color(subdued);
+        @apply c-text-subdued;
         opacity: 0.7;
       }
     }
 
     &__RemainingChars {
       @include withContext(".cobalt-FormField--withHint") {
-        bottom: spacing(md);
+        @apply c-bottom-md;
       }
-      @include text-color(subdued);
+      @apply c-text-subdued;
 
       position: absolute;
 
-      bottom: spacing(xs);
+      @apply c-bottom-xs;
 
       width: 100%;
 

package/styles/components/Form/TextInput.scss

@@ -12,7 +12,7 @@
       @include semantic-color(icon, base, fill);
       position: absolute;
       top: 0;
-      left: spacing(xs);
+      @apply c-left-xs;
 
       height: 100%;
       display: flex;
@@ -26,7 +26,7 @@
       @include form-input-base($self);
 
       &::placeholder {
-        @include text-color(subdued);
+        @apply c-text-subdued;
         opacity: 0.7;
       }
     }

package/styles/components/Form/ToggleSwitch.scss

@@ -79,7 +79,7 @@ $toggle-switch-size-large: 28px;
 
     position: relative;
 
-    margin-bottom: spacing(xs);
+    @apply c-mb-xs;
 
     align-items: center;
     flex-direction: row;
@@ -100,13 +100,10 @@ $toggle-switch-size-large: 28px;
     }
 
     &__Label {
-      @include c-text-body-md;
-      @include text-color(base);
+      @apply c-text-body-md c-text-base c-p-none c-pr-sm;
       display: inline-block;
 
       flex: 1;
-
-      padding: 0 spacing(sm) 0 0;
     }
 
     &__ToggleSwitch {
@@ -142,7 +139,7 @@ $toggle-switch-size-large: 28px;
     }
 
     &__ToggleSwitchSlider:after {
-      @include text-color(accent);
+      @apply c-text-accent;
       position: absolute;
 
       opacity: 0;
@@ -165,7 +162,7 @@ $toggle-switch-size-large: 28px;
       &:checked
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        @include fill-bg-color(accent);
+        @apply c-bg-fill-accent;
       }
 
       &:not([disabled]) + .cobalt-ToggleSwitchField__ToggleSwitch,
@@ -182,7 +179,7 @@ $toggle-switch-size-large: 28px;
       &[disabled]
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        @include fill-bg-color(disabled);
+        @apply c-bg-fill-disabled;
       }
 
       &[disabled]
@@ -194,12 +191,12 @@ $toggle-switch-size-large: 28px;
       &[disabled]:checked
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        @include fill-bg-color(accent);
+        @apply c-bg-fill-accent;
         opacity: 0.5;
       }
 
       &[disabled] ~ .cobalt-ToggleSwitchField__Label {
-        @include text-color(subdued);
+        @apply c-text-subdued;
         opacity: 0.7;
       }
 
@@ -214,24 +211,24 @@ $toggle-switch-size-large: 28px;
       .cobalt-ToggleSwitchField__Input
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        @include border(error, 2);
+        @apply c-border-error c-border-2;
       }
 
       .cobalt-ToggleSwitchField__Input:focus
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        @include border(error, 2);
+        @apply c-border-error c-border-2;
       }
 
       .cobalt-ToggleSwitchField__Input:checked
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        @include fill-bg-color(negative);
+        @apply c-bg-fill-negative;
       }
     }
 
     .cobalt-Hint {
-      margin: spacing(xs) 0 0 1px;
+      @apply c-mt-xs c-mr-none c-mb-none c-ml-[1px];
     }
 
     &--large {
@@ -250,7 +247,7 @@ $toggle-switch-size-large: 28px;
       }
 
       .cobalt-ToggleSwitchField__Label {
-        padding: 0 0 0 spacing(sm);
+        @apply c-p-none c-pl-sm;
       }
     }
   }

package/styles/components/Form/field.scss

@@ -3,7 +3,7 @@ $formfield-maxwidth: 600px;
 
 @mixin form-field-container {
   @include withContext(".cobalt-FormField--withHint >") {
-    margin-bottom: spacing(sm);
+    @apply c-mb-sm;
   }
 
   width: 100%;
@@ -17,7 +17,7 @@ $formfield-maxwidth: 600px;
 
 .cobalt- {
   &FormField {
-    margin: spacing(xs) 0 spacing(sm) 0;
+    @apply c-mt-xs c-mb-sm c-mx-none;
 
     min-width: $formfield-minwidth;
 
@@ -35,7 +35,7 @@ $formfield-maxwidth: 600px;
     }
 
     .cobalt-FormField__Label {
-      @include text-color(base);
+      @apply c-text-base;
       display: inline-block;
 
       padding: 0 0 10px 1px;
@@ -46,17 +46,19 @@ $formfield-maxwidth: 600px;
     }
 
     .cobalt-Hint {
-      margin-top: -(spacing(xs)); // to compensate the extra space added to animate the Tip
+      margin-top: calc(
+        theme("spacing.xs") * -1
+      ); // to compensate the extra space added to animate the Tip
 
       animation-name: cobalt-FormField__Hint--fade-in;
       animation-duration: 200ms;
     }
 
     & + .cobalt-FormField {
-      margin-top: spacing(md);
+      @apply c-mt-md;
 
       .cobalt-FormField__Label {
-        margin-top: spacing(xs);
+        @apply c-mt-xs;
       }
     }
   }

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;
 }