@drivy/cobalt 0.25.0 → 0.26.0

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

@@ -1,11 +1,12 @@
 @use "sass:math";
 
 .cobalt-CalendarRangePicker {
-  $calendar-start-end-day-color: color(purple);
-  $calendar-start-end-day-font-color: color(white);
+  // TOFIX change it to AccentAlt color
   $calendar-range-day-color: lighten(color(purple, light), 29);
   $calendar-selected-day-invalid-color: color(red);
+  // TOFIX change it to ErrorAlt color
   $calendar-range-day-invalid-color: lighten(color(red), 20);
+  // TOFIX find a semantic color equivalent
   $calendar-out-of-range-color: darken($calendar-range-day-invalid-color, 8);
 
   $calendar-day-inner-height: 24px;
@@ -26,6 +27,9 @@
   }
 
   @mixin start-end-day {
+    @include bg-color(accent);
+    @include text-color(inversed);
+
     position: absolute;
     z-index: -1;
     top: math.div($calendar-day-inner-height - $calendar-start-end-size, 2);
@@ -37,12 +41,9 @@
     height: $calendar-start-end-size;
     width: $calendar-start-end-size;
 
-    color: $calendar-start-end-day-font-color;
-
     content: "";
 
     border-radius: 50%;
-    background: $calendar-start-end-day-color;
 
     box-shadow: rgba(176, 26, 167, 0.4) 0 2px 6px 0;
   }
@@ -147,7 +148,7 @@
 
     &--startDay,
     &--endDay {
-      color: $calendar-start-end-day-font-color;
+      @include text-color(inversed);
 
       font-weight: 600;
 
@@ -182,15 +183,23 @@
     }
 
     // start/end day content when the other one is currently edited + today
-    &--startDay.cobalt-CalendarRangePicker__day--today:not(&--endDay).cobalt-CalendarRangePicker__day--subdued,
-    &--endDay.cobalt-CalendarRangePicker__day--today:not(&--startDay).cobalt-CalendarRangePicker__day--subdued {
+    &--startDay.cobalt-CalendarRangePicker__day--today:not(
+        &--endDay
+      ).cobalt-CalendarRangePicker__day--subdued,
+    &--endDay.cobalt-CalendarRangePicker__day--today:not(
+        &--startDay
+      ).cobalt-CalendarRangePicker__day--subdued {
       font-weight: 600;
       color: color(purple);
     }
 
     // not today
-    &--startDay:not(&--endDay):not(&--today).cobalt-CalendarRangePicker__day--subdued,
-    &--endDay:not(&--startDay):not(&--today).cobalt-CalendarRangePicker__day--subdued {
+    &--startDay:not(&--endDay):not(
+        &--today
+      ).cobalt-CalendarRangePicker__day--subdued,
+    &--endDay:not(&--startDay):not(
+        &--today
+      ).cobalt-CalendarRangePicker__day--subdued {
       font-weight: inherit;
       color: black;
     }
@@ -204,9 +213,13 @@
       box-shadow: none;
     }
 
-    &--selected:not(&--startDay).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--firstOfMonth
+    &--selected:not(
+        &--startDay
+      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--firstOfMonth
       .cobalt-CalendarRangePicker__day-inner:before,
-    &--selected:not(&--endDay).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--lastOfMonth
+    &--selected:not(
+        &--endDay
+      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--lastOfMonth
       .cobalt-CalendarRangePicker__day-inner:before {
       position: absolute;
 
@@ -264,7 +277,9 @@
     }
 
     // out of range start day range
-    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
+    &--startDay:not(
+        &--endDay
+      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
       .cobalt-CalendarRangePicker__day-inner {
         @include start-range($calendar-out-of-range-color);
       }
@@ -278,7 +293,9 @@
     }
 
     // invalid end day range
-    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
+    &--endDay:not(
+        &--startDay
+      ).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
       .cobalt-CalendarRangePicker__day-inner {
         @include end-range($calendar-out-of-range-color);
       }
@@ -287,8 +304,9 @@
     // invalid start/end day background (circle)
     &--startDay .cobalt-CalendarRangePicker__day-inner:after,
     &--endDay .cobalt-CalendarRangePicker__day-inner:after {
+      @include bg-color(error);
+
       box-shadow: rgba($calendar-selected-day-invalid-color, 0.4) 0 2px 6px 0;
-      background: $calendar-selected-day-invalid-color;
     }
 
     // invalid start/end day background (circle) when the other one is currently edited
@@ -304,7 +322,9 @@
       border-right: crossMonthBorder($calendar-range-day-invalid-color);
     }
 
-    &--selected:not(&--startDay).cobalt-CalendarRangePicker__day--invalid.cobalt-CalendarRangePicker__day--firstOfMonth
+    &--selected:not(
+        &--startDay
+      ).cobalt-CalendarRangePicker__day--invalid.cobalt-CalendarRangePicker__day--firstOfMonth
       .cobalt-CalendarRangePicker__day-inner:before {
       border-right: crossMonthBorder($calendar-out-of-range-color);
     }
@@ -314,7 +334,9 @@
       border-left: crossMonthBorder($calendar-range-day-invalid-color);
     }
 
-    &--selected:not(&--endDay).cobalt-CalendarRangePicker__day--invalid.cobalt-CalendarRangePicker__day--lastOfMonth
+    &--selected:not(
+        &--endDay
+      ).cobalt-CalendarRangePicker__day--invalid.cobalt-CalendarRangePicker__day--lastOfMonth
       .cobalt-CalendarRangePicker__day-inner:before {
       border-left: crossMonthBorder($calendar-out-of-range-color);
     }

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

@@ -1,20 +1,18 @@
 @use "sass:math";
 
-$daySize: spacing();
+$daySize: spacing(md);
 
 .cobalt-CalendarView {
   display: flex;
 
   &__month {
     &:not(:last-child) {
-      margin-right: spacing(tight);
+      margin-right: spacing(sm);
     }
   }
 
   &__monthName {
-    text-transform: uppercase;
-    color: color(graphite, light);
-    font-weight: bold;
+    @include c-text-section-heading;
   }
 
   &__week {
@@ -26,6 +24,8 @@ $daySize: spacing();
   }
 
   &__day {
+    @include text-color(base);
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -33,27 +33,28 @@ $daySize: spacing();
     height: $daySize;
     flex-shrink: 0;
 
-    color: color(graphite);
-
     font-size: 12px;
 
     border-radius: math.div($daySize, 2);
 
     &--disabled {
-      background-color: color(grey);
+      @include bg-color(disabled);
     }
 
     &--highlighted {
-      color: color(white);
+      @include text-color(inversed);
 
+      // TOFIX find a semantic color equivalent
       background-color: color(turquoise);
     }
 
     &--semi-highlighted {
+      // TOFIX find a semantic color equivalent
       background-color: lighten(color(turquoise), 30);
     }
 
     &--past {
+      // TOFIX find a semantic color equivalent
       color: color(grey);
     }
 

package/styles/components/Callout/index.scss

@@ -1,64 +1,72 @@
 .cobalt- {
   &Callout {
-    @include text-style-body;
+    @include c-text-body-md;
+    @include text-color(base);
+    @include bg-color(secondary);
 
     position: relative;
 
-    padding: spacing(tight);
-    margin-bottom: spacing();
+    padding: spacing(sm);
+    margin-bottom: spacing(md);
 
-    background-color: color(white);
     border-radius: 3px;
 
-    box-shadow: elevation(light);
+    box-shadow: elevation(base);
+
+    &:before {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+
+      display: block;
+      width: 3px;
+
+      border-top-left-radius: inherit;
+      border-bottom-left-radius: inherit;
+
+      content: "";
+    }
   }
 
   &Callout--info {
-    @include card-strip(turquoise);
+    &:before {
+      @include fill-bg-color(secondary);
+    }
   }
 
   &Callout--success {
-    @include card-strip(green);
+    &:before {
+      @include fill-bg-color(success);
+    }
   }
 
   &Callout--error {
-    @include card-strip(red);
+    &:before {
+      @include fill-bg-color(error);
+    }
   }
 
   &Callout__Title {
-    @include text-style-title-tiny;
+    @include c-text-title-sm;
 
-    margin-bottom: spacing(extra-tight);
+    margin-bottom: spacing(xs);
   }
 
   &Callout__Close {
     position: absolute;
 
-    top: -8px;
-    right: -8px;
-
-    width: 28px;
-    height: 28px;
-    padding: 0;
+    top: -14px;
+    right: -20px;
 
     border: 0;
 
-    font-size: 20px;
-    line-height: 28px;
-    text-align: center;
-
-    color: color(graphite, light);
-
-    background-color: color(white);
-    border-radius: 50%;
-    box-shadow: elevation(light);
+    background-color: transparent;
 
     cursor: pointer;
 
-    transition: color 0.2s;
-
-    &:hover {
-      color: color(graphite);
+    .cobalt-Icon {
+      transition: fill 0.2s;
     }
   }
 }

package/styles/components/Card/index.scss

@@ -4,41 +4,41 @@
   $legacy-card-padding-tight: 12px;
 
   &Card {
+    @include bg-color(secondary);
     width: 100%;
 
-    background-color: color(white);
     border-radius: $card-border-radius;
 
-    box-shadow: elevation(light);
+    box-shadow: elevation(base);
 
     &--flattened {
-      border: border($color: grey);
+      @include border(base);
 
       box-shadow: none;
     }
   }
 
   &Card__Section {
+    @include bg-color(secondary);
     position: relative;
 
     display: block;
     padding: $card-padding;
-
-    background-color: color(white);
   }
 
   &Card__Section--subdued {
-    background-color: color(grey, lighter);
+    @include bg-color(neutralAlt);
   }
 
   &Card__Section + &Card__Section--divided {
+    @include border-top(subdued);
     padding-top: $card-padding - 1px;
-
-    border-top: 1px solid rgba(#000, 0.12);
   }
 
   &Card__Section + &Card__Section--dividedSoft {
     &:before {
+      @include bg-color(neutral);
+
       position: absolute;
       top: 0;
       right: 0;
@@ -48,7 +48,6 @@
       width: calc(100% - #{$card-padding});
 
       content: "";
-      background-color: rgba(#000, 0.12);
     }
   }
 
@@ -85,7 +84,7 @@ a.cobalt-Card__Section[href] {
   &:hover {
     z-index: zx("above");
 
-    box-shadow: elevation(light);
+    box-shadow: elevation(base);
 
     transform: scale(1.01);
   }

package/styles/components/Cell/index.scss

@@ -3,15 +3,17 @@
     position: relative;
 
     &--divided {
-      border-top: border(grey);
+      @include border-top(base);
 
-      &:first-child {
+      &:first-of-type {
         border-top: 0;
       }
     }
 
     &--softDivided {
       &::before {
+        @include semantic-color(base, stroke, background-color);
+
         position: absolute;
         top: 0;
         right: 0;
@@ -21,10 +23,9 @@
         width: calc(100% - #{spacing(sm)});
 
         content: "";
-        background-color: color(grey);
       }
 
-      &:first-child::before {
+      &:first-of-type::before {
         display: none;
       }
     }

package/styles/components/Chip/index.scss

@@ -5,6 +5,9 @@ $chip-large-height: 50px;
 
 .cobalt- {
   &Chip {
+    @include border(base);
+    @include bg-color(secondary);
+
     position: relative;
 
     display: inline-flex;
@@ -15,20 +18,15 @@ $chip-large-height: 50px;
     max-width: 100%;
     padding: 0;
 
-    border: 1px solid color(grey);
-
-    background-color: color(white);
     border-radius: math.div($chip-default-height, 2);
   }
 
   &Chip--interactive {
+    @include border-color(baseInteractive);
+
     &:not([disabled]) {
       cursor: pointer;
     }
-
-    &:hover {
-      border-color: color(grey, dark);
-    }
   }
 
   &Chip--large {
@@ -43,22 +41,21 @@ $chip-large-height: 50px;
   }
 
   &Chip--large &Chip__Text {
-    padding: 0 spacing(tight) 0 spacing(extra-tight);
+    padding: 0 spacing(sm) 0 spacing(xs);
   }
 
   &Chip--disabled {
-    background-color: color(grey);
+    @include bg-color(disabled);
     opacity: 0.5;
   }
 
   &Chip--active {
-    border-color: color(indigo);
-
-    background-color: color(indigo);
+    @include bg-color(accentAlt);
+    @include border-color(accentAlt);
   }
 
   &Chip--active &Chip__Text {
-    color: color(white);
+    @include text-color(accentAlt);
   }
 
   &Chip__Content {
@@ -81,9 +78,9 @@ $chip-large-height: 50px;
   }
 
   &Chip__Text {
-    @include text-style-section-header;
+    @include c-text-section-heading;
 
-    padding: 0 spacing(extra-tight);
+    padding: 0 spacing(xs);
 
     text-overflow: ellipsis;
 

package/styles/components/EmptyState/index.scss

@@ -16,19 +16,19 @@
     max-width: 100%;
     height: auto;
 
-    margin-bottom: spacing();
+    margin-bottom: spacing(md);
   }
 
   &EmptyState__Title {
-    @include text-style-title-small;
+    @include c-text-title-sm;
 
     margin-bottom: spacing(xs);
   }
 
   &EmptyState__Body {
-    @include text-style-body;
-    @include text-style--bodySubdued;
+    @include c-text-body-md;
+    @include text-color(subdued);
 
-    margin-bottom: spacing();
+    margin-bottom: spacing(md);
   }
 }

package/styles/components/Flash/index.scss

@@ -1,19 +1,33 @@
 .cobalt- {
   &Flash {
-    @include text-style-body;
-    @include text-style--bodyInversed;
+    @include c-text-body-md;
 
     max-width: 800px;
 
     display: inline-block;
 
-    padding: spacing(tight) spacing(base) spacing(tight) spacing(tight);
+    padding: spacing(sm) spacing(md) spacing(sm) spacing(sm);
 
-    background-color: color(graphite);
+    border-radius: border-radius(md);
 
-    border-radius: border-radius(large);
+    box-shadow: elevation(lg);
 
-    box-shadow: elevation(strong);
+    &--info {
+      // TOFIX: there is no matching semantic color for this case
+      color: color(white);
+
+      background-color: color(graphite);
+    }
+
+    &--success {
+      @include bg-color(successAlt);
+      @include text-color(successAlt);
+    }
+
+    &--error {
+      @include bg-color(errorAlt);
+      @include text-color(errorAlt);
+    }
   }
 
   &Flash__wrapper {
@@ -23,7 +37,7 @@
   }
 
   &Flash__Icon {
-    margin-right: spacing(extra-tight);
+    margin-right: spacing(xs);
     min-width: 20px;
   }
 }

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

@@ -113,7 +113,7 @@
 
     top: -2px;
 
-    margin: 0 spacing(extra-tight) 0 -5px;
+    margin: 0 spacing(xs) 0 -5px;
   }
 
   &__item-value {
@@ -127,11 +127,11 @@
 
     width: 100%;
 
-    padding: spacing(extra-tight) spacing(unit) spacing(extra-tight) 11px;
+    padding: spacing(xs) spacing("2xs") spacing(xs) 11px;
   }
 
   &__item:first-child &__item-wrapper {
-    padding-top: spacing(extra-tight) + 1;
+    padding-top: spacing(xs) + 1;
   }
 
   &__item-wrapper--disabled {

package/styles/components/Form/CheckablePill.scss

@@ -37,7 +37,7 @@
     align-items: center;
     height: $height;
     box-sizing: border-box;
-    padding: 0 spacing(base);
+    padding: 0 spacing(md);
     border: $border-width solid color(grey);
 
     line-height: $height - $border-width * 2;
@@ -97,7 +97,7 @@
 
   &--with-icon {
     .cobalt-Icon {
-      margin-right: spacing(extra-tight);
+      margin-right: spacing(xs);
 
       fill: $main-color-light;
 
@@ -141,7 +141,7 @@
   align-items: center;
 
   .cobalt-CheckablePillField {
-    margin-right: spacing(tight);
+    margin-right: spacing(sm);
 
     &--with-icon {
       white-space: nowrap;

package/styles/components/Form/Checkmark.scss

@@ -13,7 +13,7 @@
 
     position: relative;
 
-    margin-bottom: spacing(extra-tight);
+    margin-bottom: spacing(xs);
     display: block;
 
     font-weight: 400;
@@ -37,7 +37,7 @@
 
         flex: 0 0 auto;
 
-        margin-right: spacing(extra-tight);
+        margin-right: spacing(xs);
         border: 2px solid $checkmark-color;
 
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
@@ -196,7 +196,7 @@
     @include form-field-container;
 
     .cobalt-Hint {
-      margin: spacing(extra-tight) 0 0 spacing();
+      margin: spacing(xs) 0 0 spacing(md);
     }
   }
 }

package/styles/components/Form/ComposedField.scss

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

package/styles/components/Form/Fieldset.scss

@@ -2,22 +2,22 @@
   &Fieldset {
     $border-width: 1px;
 
-    padding: (spacing(tight) -$border-width) 0 0 0;
+    padding: (spacing(sm) -$border-width) 0 0 0;
     border-top: $border-width solid color(grey, light);
 
     & > legend {
-      @include text-style-title-small;
+      @include c-text-title-sm;
 
-      margin-bottom: spacing(extra-tight);
-      padding: 0 spacing(tight) 0 0;
+      margin-bottom: spacing(xs);
+      padding: 0 spacing(sm) 0 0;
     }
 
     &:not(:first-child) {
-      margin-top: spacing(medium);
+      margin-top: spacing(lg);
     }
 
     & + & {
-      margin-top: spacing(loose);
+      margin-top: spacing(xl);
     }
   }
 }