@drivy/cobalt 1.1.2 → 1.1.4

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

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