@drivy/cobalt 1.1.3 → 1.1.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 {

package/styles/components/Form/CheckablePill.scss

@@ -28,16 +28,13 @@
   }
 
   &__Label {
-    @include border(base, 2);
-    @include text-color(base);
-    @include bg-color(secondary);
+    @apply c-border-base c-border-2 c-text-base c-bg-secondary c-py-none c-px-md;
     position: relative;
 
     display: flex;
     align-items: center;
     height: $height;
     box-sizing: border-box;
-    padding: 0 spacing(md);
 
     // We remove the border-bottom and border-top width
     line-height: $height - 2px * 2;
@@ -47,7 +44,7 @@
     transition: $animation-duration;
 
     &:hover {
-      @include border-color(accent);
+      @apply c-border-accent;
       box-shadow: 0 4px 4px 0 rgba(#000, 0.16);
 
       transform: translateY(-1px);
@@ -66,7 +63,7 @@
 
   &__Input:focus + #{ $self }__Label:after {
     // Color the shadow by using default text color
-    @include text-color(accent);
+    @apply c-text-accent;
     position: absolute;
 
     box-shadow: 0 0 0 1px;
@@ -74,8 +71,7 @@
   }
 
   &__Input:disabled + #{ $self }__Label {
-    @include border(base, 2);
-    @include bg-color(disabled);
+    @apply c-border-base c-border-2 c-bg-disabled;
 
     cursor: default;
     box-shadow: none;
@@ -85,15 +81,13 @@
   }
 
   &__Input:checked + #{ $self }__Label {
-    @include bg-color(accentAlt);
-    @include text-color(accentAlt);
-    @include border(accentAlt, 2);
+    @apply c-bg-accentAlt c-text-accentAlt c-border-accentAlt c-border-2;
   }
 
   &--with-icon {
     .cobalt-Icon {
       @include semantic-color(icon, base, fill);
-      margin-right: spacing(xs);
+      @apply c-mr-xs;
 
       transition: fill $animation-duration ease-in-out;
     }
@@ -105,9 +99,7 @@
 
   &--error {
     #{ $self }__Input + #{ $self }__Label {
-      @include border-color(error);
-      @include text-color(base);
-      @include bg-color(secondary);
+      @apply c-border-error c-text-base c-bg-secondary;
 
       .cobalt-Icon {
         @include semantic-color(icon, base, fill);
@@ -115,9 +107,7 @@
     }
 
     #{ $self }__Input:checked + #{ $self }__Label {
-      @include text-color(errorAlt);
-      @include bg-color(errorAlt);
-      @include border-color(errorAlt);
+      @apply c-text-errorAlt c-bg-errorAlt c-border-errorAlt;
 
       .cobalt-Icon {
         @include semantic-color(icon, errorAlt, fill);
@@ -135,7 +125,7 @@
   align-items: center;
 
   .cobalt-CheckablePillField {
-    margin-right: spacing(sm);
+    @apply c-mr-sm;
 
     &--with-icon {
       white-space: nowrap;

package/styles/components/Form/Checkmark.scss

@@ -4,12 +4,10 @@
     $radio-checkmark-size: 20px;
     $checkbox-checkmark-size: 18px;
 
-    @include text-color(base);
-    @include c-text-body-md;
+    @apply c-text-base c-text-body-md c-mb-xs;
 
     position: relative;
 
-    margin-bottom: spacing(xs);
     display: block;
 
     &__Input {
@@ -23,13 +21,11 @@
       opacity: 0;
 
       & + #{ $self }__Checkmark {
-        @include border(accent, 2);
+        @apply c-border-accent c-border-2 c-mr-xs;
         display: inline-block;
 
         flex: 0 0 auto;
 
-        margin-right: spacing(xs);
-
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
         cursor: pointer;
 
@@ -37,7 +33,7 @@
       }
 
       &[disabled] ~ .cobalt-CheckmarkField__Label {
-        @include text-color(subdued);
+        @apply c-text-subdued;
       }
     }
 
@@ -53,18 +49,15 @@
         width: $radio-checkmark-size;
         height: $radio-checkmark-size;
 
-        border-radius: 50%;
+        @apply c-rounded-full;
       }
 
       & + #{ $self }__Checkmark::after {
-        @include border(accent);
-        @include bg-color(accentAlt);
+        @apply c-border-accent c-bg-accentAlt c-rounded-full;
 
         // Exception for radio inputs
         border-width: 5px;
 
-        border-radius: 50%;
-
         content: "";
         opacity: 0;
 
@@ -82,14 +75,13 @@
       }
 
       &[disabled] + #{ $self }__Checkmark {
-        @include border-color(subdued);
+        @apply c-border-subdued;
 
         box-shadow: none;
       }
 
       &[disabled]:checked ~ #{ $self }__Checkmark::after {
-        @include border-color(subdued);
-        @include bg-color(disabled);
+        @apply c-border-subdued c-bg-disabled;
       }
     }
 
@@ -116,7 +108,7 @@
       }
 
       &:checked + #{ $self }__Checkmark {
-        @include fill-bg-color(accent);
+        @apply c-bg-accent;
         will-change: background-color;
       }
 
@@ -135,13 +127,13 @@
       }
 
       &[disabled] + #{ $self }__Checkmark {
-        @include border-color(subdued);
+        @apply c-border-subdued;
 
         box-shadow: none;
       }
 
       &[disabled]:checked + #{ $self }__Checkmark {
-        @include bg-color(disabled);
+        @apply c-bg-disabled;
       }
     }
 
@@ -159,16 +151,15 @@
 
     &--error {
       #{ $self }__Input + #{ $self }__Checkmark {
-        @include border-color(error);
+        @apply c-border-error;
       }
 
       #{ $self }__Input[type="radio"]:checked + #{ $self }__Checkmark::after {
-        @include border-color(error);
-        @include bg-color(errorInteractive);
+        @apply c-border-error c-bg-errorInteractive;
       }
 
       #{ $self }__Input[type="checkbox"]:checked + #{ $self }__Checkmark {
-        @include bg-color(errorInteractive);
+        @apply c-bg-errorInteractive;
       }
     }
   }
@@ -177,7 +168,7 @@
     @include form-field-container;
 
     .cobalt-Hint {
-      margin: spacing(xs) 0 0 spacing(md);
+      @apply c-mt-xs c-mr-none c-mb-none c-ml-md;
     }
   }
 }

package/styles/components/Form/ComposedField.scss

@@ -8,13 +8,13 @@
     align-items: stretch;
 
     & > * + * {
-      margin-left: spacing(sm);
+      @apply c-ml-sm;
     }
   }
 }
 
 @include breakpoint($until: sm) {
   .cobalt-ComposedFormField > * + * {
-    margin-left: spacing(xs);
+    @apply c-ml-xs;
   }
 }

package/styles/components/Form/Fieldset.scss

@@ -1,23 +1,20 @@
 .cobalt- {
   &Fieldset {
-    @include border-top(subdued);
+    @apply c-border-t c-border-t-subdued;
 
-    // We remove the border-width
-    padding: (spacing(sm) - 1px) 0 0 0;
+    // We need to keep the original calculation
+    padding: calc(theme("spacing.sm") - 1px) 0 0 0;
 
     & > legend {
-      @include c-text-title-sm;
-
-      margin-bottom: spacing(xs);
-      padding: 0 spacing(sm) 0 0;
+      @apply c-text-title-sm c-mb-xs c-pr-sm;
     }
 
     &:not(:first-child) {
-      margin-top: spacing(lg);
+      @apply c-mt-lg;
     }
 
     & + & {
-      margin-top: spacing(xl);
+      @apply c-mt-xl;
     }
   }
 }