@drivy/cobalt 0.29.2 → 0.31.0

package/styles/components/Cell/index.scss

@@ -12,7 +12,7 @@
 
     &--softDivided {
       &::before {
-        @include semantic-color(base, stroke, background-color);
+        @include semantic-color(stroke, base, background-color);
 
         position: absolute;
         top: 0;

package/styles/components/Flash/index.scss

@@ -13,10 +13,8 @@
     box-shadow: elevation(lg);
 
     &--info {
-      // TOFIX: there is no matching semantic color for this case
-      color: color(white);
-
-      background-color: color(graphite);
+      @include bg-color(info);
+      @include text-color(info);
     }
 
     &--success {

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

@@ -1,14 +1,6 @@
 @import "@reach/combobox/styles.css";
 
 .cobalt-Autocomplete {
-  $border-color: color(indigo);
-  $border-separator-popover-color: color(grey, light);
-  $selected-item-color: color(purple);
-  $selected-item-background-color: color(grey, lighter);
-  $selected-item-background-darken-color: darken(
-    $selected-item-background-color,
-    2
-  );
   $autocomplete-popover-zindex: 2147483647; //max z-index value
 
   @include form-field-container;
@@ -33,6 +25,7 @@
   }
 
   &__popover {
+    @include border(accent, 2);
     position: absolute;
 
     z-index: $autocomplete-popover-zindex;
@@ -47,14 +40,10 @@
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
 
-    border: 2px solid $border-color;
-
     background-color: color(white);
 
-    box-shadow: 0 2px 2px 0 rgba($border-color, 0.06),
-      0 6px 6px 0 rgba($border-color, 0.04),
-      0 8px 8px 0 rgba($border-color, 0.06),
-      inset 0 1px 0 0 $border-separator-popover-color;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06), 0 6px 6px 0 rgba(0, 0, 0, 0.04),
+      0 8px 8px 0 rgba(0, 0, 0, 0.06);
 
     border-top-width: 0;
 
@@ -82,6 +71,8 @@
   }
 
   &__item {
+    @include bg-color(secondaryInteractive);
+
     width: 100%;
     display: flex;
     padding: 0;
@@ -91,19 +82,17 @@
 
   &__item:hover,
   &__item[aria-selected="true"] {
-    color: $selected-item-color;
+    @include text-color(accentAlt);
 
     cursor: pointer;
 
-    background-color: $selected-item-background-color;
-
     .cobalt-Icon {
-      fill: $selected-item-color;
+      @include semantic-color(icon, accent, fill);
     }
   }
 
   &__item[aria-selected="true"]:hover {
-    background-color: $selected-item-background-darken-color;
+    @include bg-color(accentAlt);
   }
 
   &__popover .cobalt-Autocomplete__item-icon {
@@ -133,12 +122,12 @@
   }
 
   &__item-wrapper--disabled {
-    color: color(grey, dark);
+    @include text-color(subdued);
 
     cursor: auto;
 
     .cobalt-Icon {
-      fill: color(grey, dark) !important;
+      fill: var(--c-icon-subdued) !important;
     }
   }
 

package/styles/components/Form/CheckablePill.scss

@@ -43,7 +43,6 @@
     line-height: $height - 2px * 2;
 
     border-radius: math.div($height, 2);
-    box-shadow: 0 2px 6px 0 rgba(#000, 0.12);
 
     transition: $animation-duration;
 
@@ -88,19 +87,19 @@
   &__Input:checked + #{ $self }__Label {
     @include bg-color(accentAlt);
     @include text-color(accentAlt);
-    border-color: transparent;
+    @include border(accentAlt, 2);
   }
 
   &--with-icon {
     .cobalt-Icon {
-      @include semantic-color(base, icon, fill);
+      @include semantic-color(icon, base, fill);
       margin-right: spacing(xs);
 
       transition: fill $animation-duration ease-in-out;
     }
 
     #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {
-      @include semantic-color(accentAlt, icon, fill);
+      @include semantic-color(icon, accentAlt, fill);
     }
   }
 
@@ -111,7 +110,7 @@
       @include bg-color(secondary);
 
       .cobalt-Icon {
-        @include semantic-color(base, icon, fill);
+        @include semantic-color(icon, base, fill);
       }
     }
 
@@ -121,7 +120,7 @@
       @include border-color(errorAlt);
 
       .cobalt-Icon {
-        @include semantic-color(errorAlt, icon, fill);
+        @include semantic-color(icon, errorAlt, fill);
       }
     }
   }

package/styles/components/Form/Checkmark.scss

@@ -5,17 +5,13 @@
     $checkbox-checkmark-size: 18px;
 
     @include text-color(base);
+    @include c-text-body-md;
 
     position: relative;
 
     margin-bottom: spacing(xs);
     display: block;
 
-    font-weight: 400;
-    font-family: font-family(base);
-    font-size: font-size(body);
-    line-height: line-height(body);
-
     &__Input {
       position: absolute;
 

package/styles/components/Form/Hint.scss

@@ -30,14 +30,5 @@
     &--error {
       @include text-color(error);
     }
-
-    a {
-      @include text-color(accentInteractive);
-      text-decoration: none;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
   }
 }

package/styles/components/Form/RadioWithDetails.scss

@@ -9,7 +9,7 @@
   --visual-radio-size: 18px;
 
   .cobalt-radio-with-details__inner {
-    @include border(strongInteractive);
+    @include border(baseInteractive);
     @include text-color(base);
     @include bg-color(secondary);
     height: 100%;
@@ -49,7 +49,7 @@
   }
 
   .cobalt-radio-with-details__description {
-    @include c-text-body-md;
+    @include c-text-body-sm;
     @include text-color(subdued);
 
     transition: color 150ms ease-in-out;
@@ -89,7 +89,7 @@
     }
 
     &:focus-visible + #{ $self }__inner {
-      @include semantic-color(accentAlt, stroke, outline-color);
+      @include semantic-color(stroke, accentAlt, outline-color);
       box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
       outline-style: dashed;
       outline-width: 1px;
@@ -102,7 +102,7 @@
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input {
-      @include semantic-color(accentAlt, icon, border-color);
+      @include semantic-color(icon, accentAlt, border-color);
     }
 
     &:checked + #{ $self }__inner #{ $self }__title,
@@ -130,7 +130,7 @@
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input::after {
-      @include semantic-color(accentAlt, icon, border-color);
+      @include semantic-color(icon, accentAlt, border-color);
 
       opacity: 1;
 

package/styles/components/Form/TextInput.scss

@@ -9,7 +9,7 @@
     position: relative;
 
     &__Icon {
-      @include semantic-color(base, icon, fill);
+      @include semantic-color(icon, base, fill);
       position: absolute;
       top: 0;
       left: spacing(xs);
@@ -37,22 +37,22 @@
       }
 
       #{ $self }__Input + #{ $self }__Icon {
-        @include semantic-color(accent, icon, fill);
+        @include semantic-color(icon, accent, fill);
         pointer-events: none;
       }
 
       #{ $self }__Input:placeholder-shown + #{ $self }__Icon {
-        @include semantic-color(subdued, icon, fill);
+        @include semantic-color(icon, subdued, fill);
         opacity: 0.7;
       }
 
       #{ $self }__Input:focus + #{ $self }__Icon,
       #{ $self }__Input:focus:placeholder-shown + #{ $self }__Icon {
-        @include semantic-color(accent, icon, fill);
+        @include semantic-color(icon, accent, fill);
       }
 
       #{ $self }__Input:disabled + #{ $self }__Icon {
-        @include semantic-color(subdued, icon, fill);
+        @include semantic-color(icon, subdued, fill);
         opacity: 0.7;
       }
     }

package/styles/components/Form/ToggleSwitch.scss

@@ -120,7 +120,7 @@ $toggle-switch-size-large: 28px;
     }
 
     &__ToggleSwitchSlider {
-      @include semantic-color(base, stroke, background-color);
+      @include semantic-color(stroke, base, background-color);
       display: inline-block;
 
       transition: $animation-duration;

package/styles/components/Helper/index.scss

@@ -3,9 +3,6 @@
   @include bg-color(secondary);
   padding: spacing(sm);
 
-  // FIXME: remove when releasing semantics color
-  background-color: fade-out(color(purple), 0.92);
-
   border-radius: border-radius(xl);
 
   &__title {

package/styles/components/Icon/index.scss

@@ -24,13 +24,12 @@
   }
 
   &Icon--contained {
-    @include bg-color(secondary);
+    @include bg-color(neutralAlt);
     height: 40px;
     width: 40px;
     padding: math.div(40px - 24px, 2);
 
     border-radius: 50%;
-    box-shadow: elevation(base);
   }
 
   &Icon--size16 {

package/styles/components/Note/index.scss

@@ -9,6 +9,10 @@
     padding: spacing(sm);
 
     border-radius: border-radius(lg);
+
+    a {
+      color: inherit;
+    }
   }
 
   &Note--fullWidth {

package/styles/components/PhotoDropzone/index.scss

@@ -31,8 +31,7 @@
 }
 
 .cobalt-photo-dropzone--dragging {
-  // FIXME NEW COLORS: this background doesn't match any semantic color
-  background-color: #f6e5f5;
+  @include bg-color(accentAlt);
 
   transition: background-color 0.25s;
 

package/styles/components/TabBar/index.scss

@@ -41,7 +41,7 @@
   }
 
   &TabScroller--underlined:after {
-    @include fill-bg-color(base);
+    @include semantic-color(stroke, base, background);
     position: absolute;
     bottom: 0;
 

package/styles/components/Tag/index.scss

@@ -18,9 +18,7 @@
   }
 
   &Tag--important {
-    // TOFIX Move to errorAlt for bg and text
-    @include text-color(error);
-
-    background-color: lighten(color(red), 24);
+    @include bg-color(errorAlt);
+    @include text-color(errorAlt);
   }
 }