@drivy/cobalt 0.25.1 → 0.26.1

package/styles/components/Form/Hint.scss

@@ -2,11 +2,11 @@
 
 .cobalt- {
   &Hint {
-    @include text-style-body;
+    @include c-text-body-md;
 
     position: relative;
 
-    margin-top: spacing(extra-tight);
+    margin-top: spacing(xs);
     margin-left: 1px;
 
     display: flex;
@@ -23,7 +23,7 @@
       justify-content: center;
       align-items: flex-start;
       flex-shrink: 0;
-      margin-right: spacing(extra-tight);
+      margin-right: spacing(xs);
     }
 
     &--success {

package/styles/components/Form/RadioWithDetails.scss

@@ -52,7 +52,7 @@
   }
 
   .cobalt-radio-with-details__description {
-    @include text-style-body;
+    @include c-text-body-md;
     color: color(grey, dark);
 
     transition: color 150ms ease-in-out;

package/styles/components/Form/Select.scss

@@ -11,7 +11,7 @@
     &__Input {
       @include form-input-base($self);
 
-      padding-right: spacing(medium);
+      padding-right: spacing(lg);
 
       line-height: 20px;
 

package/styles/components/Form/Slider.scss

@@ -5,15 +5,15 @@
     $self: &;
 
     @include withContext(".cobalt-FormField--withHint >") {
-      padding-bottom: spacing(tight);
+      padding-bottom: spacing(sm);
     }
 
     width: 100%;
 
     [data-reach-slider-input][data-orientation="horizontal"] {
       height: 3px;
-      padding-top: spacing(tight);
-      padding-bottom: spacing(tight);
+      padding-top: spacing(sm);
+      padding-bottom: spacing(sm);
       width: 100%;
     }
 
@@ -26,19 +26,19 @@
     }
 
     [data-reach-slider-handle] {
-      width: spacing(base);
-      height: spacing(base);
+      width: spacing(md);
+      height: spacing(md);
       border-width: 0;
 
       background: color(white);
 
-      box-shadow: elevation(light), 0 0 0 1px color(grey);
+      box-shadow: elevation(base), 0 0 0 1px color(grey);
       border-radius: 50%;
     }
 
     [data-reach-slider-handle]:not([aria-disabled]):focus {
       outline: none;
-      box-shadow: elevation(light), 0 0 0 2px color(indigo);
+      box-shadow: elevation(base), 0 0 0 2px color(indigo);
     }
 
     [data-reach-slider-track][data-disabled] {

package/styles/components/Form/Stepper.scss

@@ -21,7 +21,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      margin: 0 spacing(tight);
+      margin: 0 spacing(sm);
       min-width: 96px;
 
       font-size: 32px;
@@ -30,7 +30,7 @@
     }
 
     &__Meta {
-      margin-left: spacing(extra-tight);
+      margin-left: spacing(xs);
 
       font-size: 15px;
 

package/styles/components/Form/TextArea.scss

@@ -26,12 +26,12 @@
 
     &__RemainingChars {
       @include withContext(".cobalt-FormField--withHint") {
-        bottom: spacing(base);
+        bottom: spacing(md);
       }
 
       position: absolute;
 
-      bottom: spacing(extra-tight);
+      bottom: spacing(xs);
 
       width: 100%;
 

package/styles/components/Form/TextInput.scss

@@ -12,7 +12,7 @@
     &__Icon {
       position: absolute;
       top: 0;
-      left: spacing(extra-tight);
+      left: spacing(xs);
 
       height: 100%;
       display: flex;

package/styles/components/Form/ToggleSwitch.scss

@@ -79,7 +79,7 @@ $toggle-switch-size-large: 28px;
 
     position: relative;
 
-    margin-bottom: spacing(extra-tight);
+    margin-bottom: spacing(xs);
 
     align-items: center;
     flex-direction: row;
@@ -104,7 +104,7 @@ $toggle-switch-size-large: 28px;
 
       flex: 1;
 
-      padding: 0 spacing(tight) 0 0;
+      padding: 0 spacing(sm) 0 0;
 
       font-weight: 400;
       font-family: font-family(base);
@@ -233,7 +233,7 @@ $toggle-switch-size-large: 28px;
     }
 
     .cobalt-Hint {
-      margin: spacing(extra-tight) 0 0 1px;
+      margin: spacing(xs) 0 0 1px;
     }
 
     &--large {
@@ -252,7 +252,7 @@ $toggle-switch-size-large: 28px;
       }
 
       .cobalt-ToggleSwitchField__Label {
-        padding: 0 0 0 spacing(tight);
+        padding: 0 0 0 spacing(sm);
       }
     }
   }

package/styles/components/Form/field.scss

@@ -3,7 +3,7 @@ $formfield-maxwidth: 600px;
 
 @mixin form-field-container {
   @include withContext(".cobalt-FormField--withHint >") {
-    padding-bottom: spacing(tight);
+    padding-bottom: spacing(sm);
   }
 
   width: 100%;
@@ -17,7 +17,7 @@ $formfield-maxwidth: 600px;
 
 .cobalt- {
   &FormField {
-    margin: spacing(extra-tight) 0 spacing(tight) 0;
+    margin: spacing(xs) 0 spacing(sm) 0;
 
     min-width: $formfield-minwidth;
 
@@ -46,17 +46,17 @@ $formfield-maxwidth: 600px;
     }
 
     .cobalt-Hint {
-      margin-top: -(spacing(extra-tight)); // to compensate the extra space added to animate the Tip
+      margin-top: -(spacing(xs)); // 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(base);
+      margin-top: spacing(md);
 
       > .cobalt-FormField__Label {
-        margin-top: spacing(extra-tight);
+        margin-top: spacing(xs);
       }
     }
   }

package/styles/components/Form/form.scss

@@ -62,7 +62,7 @@ $form-element--error-color: color(red);
 
     color: color(graphite);
 
-    box-shadow: elevation(light);
+    box-shadow: elevation(base);
   }
 
   &:not(:disabled):not(:read-only):focus {
@@ -81,7 +81,7 @@ $form-element--error-color: color(red);
 
     outline: none;
 
-    box-shadow: elevation(light);
+    box-shadow: elevation(base);
   }
 
   &:disabled,

package/styles/components/Helper/index.scss

@@ -9,7 +9,7 @@
   border-radius: border-radius(xl);
 
   &__title {
-    @include text-style-title-small;
+    @include c-text-title-sm;
     @include text-color(base);
   }
 

package/styles/components/Icon/iconColors.scss

@@ -2,6 +2,32 @@
 /* GENERATED WHEN BUILDING COBALT */
 /*** DO NOT MODIFY IT DIRECTLY ****/
 /**********************************/
+.cobalt-Icon--colorBase {
+  fill: var(--c-icon-base);
+}
+
+.cobalt-Icon--colorBaseInteractive {
+  fill: var(--c-icon-baseInteractive);
+}
+
+.cobalt-Icon--colorBaseInteractive:hover,
+.cobalt-Icon--colorBaseInteractive:focus {
+  fill: var(--c-icon-baseInteractive--hover);
+}
+
+.cobalt-Icon--colorSubdued {
+  fill: var(--c-icon-subdued);
+}
+
+.cobalt-Icon--colorSubduedInteractive {
+  fill: var(--c-icon-subduedInteractive);
+}
+
+.cobalt-Icon--colorSubduedInteractive:hover,
+.cobalt-Icon--colorSubduedInteractive:focus {
+  fill: var(--c-icon-subduedInteractive--hover);
+}
+
 .cobalt-Icon--colorAccent {
   fill: var(--c-icon-accent);
 }
@@ -28,25 +54,8 @@
   fill: var(--c-icon-accentAltInteractive--hover);
 }
 
-.cobalt-Icon--colorBase {
-  fill: var(--c-icon-base);
-}
-
-.cobalt-Icon--colorBaseInteractive {
-  fill: var(--c-icon-baseInteractive);
-}
-
-.cobalt-Icon--colorBaseInteractive:hover,
-.cobalt-Icon--colorBaseInteractive:focus {
-  fill: var(--c-icon-baseInteractive--hover);
-}
-
-.cobalt-Icon--colorConnect {
-  fill: var(--c-icon-connect);
-}
-
-.cobalt-Icon--colorDriver {
-  fill: var(--c-icon-driver);
+.cobalt-Icon--colorInfo {
+  fill: var(--c-icon-info);
 }
 
 .cobalt-Icon--colorError {
@@ -57,43 +66,38 @@
   fill: var(--c-icon-errorAlt);
 }
 
-.cobalt-Icon--colorInfo {
-  fill: var(--c-icon-info);
-}
-
-.cobalt-Icon--colorInfoAlt {
-  fill: var(--c-icon-infoAlt);
+.cobalt-Icon--colorSuccess {
+  fill: var(--c-icon-success);
 }
 
-.cobalt-Icon--colorInversed {
-  fill: var(--c-icon-inversed);
+.cobalt-Icon--colorSuccessAlt {
+  fill: var(--c-icon-successAlt);
 }
 
-.cobalt-Icon--colorOwner {
-  fill: var(--c-icon-owner);
+.cobalt-Icon--colorConnect {
+  fill: var(--c-icon-connect);
 }
 
-.cobalt-Icon--colorSubdued {
-  fill: var(--c-icon-subdued);
+.cobalt-Icon--colorDriver {
+  fill: var(--c-icon-driver);
 }
 
-.cobalt-Icon--colorSubduedInteractive {
-  fill: var(--c-icon-subduedInteractive);
+.cobalt-Icon--colorOwner {
+  fill: var(--c-icon-owner);
 }
 
-.cobalt-Icon--colorSubduedInteractive:hover,
-.cobalt-Icon--colorSubduedInteractive:focus {
-  fill: var(--c-icon-subduedInteractive--hover);
+.cobalt-Icon--colorWarning {
+  fill: var(--c-icon-warning);
 }
 
-.cobalt-Icon--colorSuccess {
-  fill: var(--c-icon-success);
+.cobalt-Icon--colorInfoAlt {
+  fill: var(--c-icon-infoAlt);
 }
 
-.cobalt-Icon--colorSuccessAlt {
-  fill: var(--c-icon-successAlt);
+.cobalt-Icon--colorInversed {
+  fill: var(--c-icon-inversed);
 }
 
-.cobalt-Icon--colorWarning {
-  fill: var(--c-icon-warning);
+.cobalt-Icon--colorDisabled {
+  fill: var(--c-icon-disabled);
 }

package/styles/components/Icon/index.scss

@@ -24,18 +24,25 @@
   }
 
   &Icon--contained {
+    @include bg-color(secondary);
     height: 40px;
     width: 40px;
     padding: math.div(40px - 24px, 2);
 
     border-radius: 50%;
-    background: #fff;
-    box-shadow: elevation(light);
+    box-shadow: elevation(base);
   }
 
   &Icon--size16 {
     height: 16px;
     width: 16px;
+
+    &.cobalt-Icon--contained {
+      height: 28px;
+      width: 28px;
+
+      padding: math.div(28px - 16px, 2);
+    }
   }
 
   &Icon--size20 {

package/styles/components/Modal/index.scss

@@ -43,7 +43,7 @@ $reach-ui-dialog-margin-top: 10vh;
     &[data-reach-dialog-content] {
       bottom: 0;
 
-      max-height: calc(100% - #{spacing(loose)});
+      max-height: calc(100% - #{spacing(xl)});
 
       border-radius: 16px 16px 0 0;
     }

package/styles/components/Note/index.scss

@@ -1,7 +1,7 @@
 .cobalt- {
   &Note {
-    @include text-style-body;
-    @include text-style--bodySubdued;
+    @include c-text-body-md;
+    @include text-color(info);
     @include bg-color(info);
 
     display: inline-block;

package/styles/components/Pill/index.scss

@@ -20,7 +20,7 @@ $group-item-spacing: spacing(xs);
   &Pill--large {
     $pill-height: 40px;
     height: $pill-height;
-    padding: spacing(xs) spacing();
+    padding: spacing(xs) spacing(md);
 
     border-radius: $pill-height;
   }
@@ -30,10 +30,8 @@ $group-item-spacing: spacing(xs);
   }
 
   &Pill--overlayed {
-    @include text-color(inversed);
-
-    // FIXME NEW COLORS: this background doesn't match any semantic color
-    background-color: rgba(color(graphite), 0.5);
+    @include bg-color(accentAlt);
+    @include text-color(accentAlt);
   }
 
   &Pill__Icon {

package/styles/components/Popover/index.scss

@@ -4,7 +4,7 @@
 
 [data-theme~="cobalt-popover"] {
   &.tippy-box {
-    box-shadow: elevation(strong);
+    box-shadow: elevation(lg);
   }
 
   .tippy-content {

package/styles/components/PriceTable/index.scss

@@ -1,6 +1,6 @@
 .cobalt- {
   &PriceTable__Row {
-    @include text-style-body;
+    @include c-text-body-md;
 
     display: flex;
     justify-content: space-between;

package/styles/components/ProgressBar/index.scss

@@ -6,12 +6,13 @@
   }
 
   &ProgressBar__Progression {
-    @include text-style-title;
+    @include c-text-title-md;
     @include text-color(infoAlt);
   }
 
   &ProgressBar__Title {
-    @include text-style-title-tiny;
+    @include c-text-title-sm;
+    @include text-color(base);
   }
 
   &ProgressBar__CompletedCheckbox {
@@ -21,7 +22,7 @@
   }
 
   &ProgressBar__Container {
-    @include bg-color(neutral);
+    @include fill-bg-color(subdued);
     position: relative;
 
     margin-top: spacing(sm);
@@ -33,7 +34,7 @@
   }
 
   &ProgressBar__Foreground {
-    @include semantic-color(secondary, fill, background-color);
+    @include fill-bg-color(secondary);
     position: absolute;
     left: 0;
     top: 0;
@@ -44,7 +45,7 @@
   }
 
   &ProgressBar__Tick {
-    @include bg-color(neutral);
+    @include fill-bg-color(secondary);
     position: absolute;
     top: -6px;
     right: 0;

package/styles/components/Rating/index.scss

@@ -10,9 +10,9 @@
 }
 
 .cobalt-rating__label {
+  @include text-color(subdued);
   line-height: 14px;
   font-size: 14px;
-  color: color(graphite, light);
 }
 
 .cobalt-rating-input {
@@ -81,8 +81,8 @@
   &:not(:hover):not(:focus-visible) input:focus {
     // focus feedback with keyboard navigation only
     & + .cobalt-Icon {
-      border-radius: spacing(unit);
-      box-shadow: 0 0 0 1px color(turquoise);
+      @include border(accent);
+      border-radius: spacing("2xs");
     }
   }
 

package/styles/components/TabBar/index.scss

@@ -7,7 +7,7 @@
   }
 
   &TabBar__ScrollControl {
-    flex: 0 0 spacing(medium);
+    flex: 0 0 spacing(lg);
     display: flex;
   }
 
@@ -41,6 +41,7 @@
   }
 
   &TabScroller--underlined:after {
+    @include fill-bg-color(base);
     position: absolute;
     bottom: 0;
 
@@ -48,7 +49,6 @@
     height: 1px;
 
     content: "";
-    background-color: color(grey);
   }
 
   &TabScroller__ScrollArea {
@@ -77,14 +77,17 @@
   }
 
   &Tab {
+    @include c-text-section-heading;
+    @include bg-color(secondaryInteractive);
+
     position: relative;
     z-index: zx("above");
 
     display: flex;
     flex: 1 0 auto;
     justify-content: center;
-    height: 17 * spacing(unit);
-    padding: 0 spacing();
+    height: 17 * spacing("2xs");
+    padding: 0 spacing(md);
 
     box-sizing: border-box;
     border: 0;
@@ -94,10 +97,6 @@
     white-space: nowrap;
     font-size: 16px;
     line-height: 1;
-    text-transform: uppercase;
-    color: color(graphite, light);
-    font-family: font-family(brand);
-    font-weight: 700;
 
     outline: none;
     background: none;
@@ -126,15 +125,13 @@
     &:hover,
     &:focus {
       text-decoration: inherit;
-
-      background: color(grey, lighter);
     }
 
     &[aria-selected="true"] {
-      color: color(indigo, dark);
+      @include text-color(base);
 
       &:after {
-        background: color(purple);
+        @include fill-bg-color(accent);
 
         transform: scaleX(1);
       }

package/styles/components/Tabs/index.scss

@@ -3,6 +3,7 @@
 $scrollButtonWidth: 2rem;
 
 .cobalt-tabs {
+  @include bg-color(secondary);
   position: relative;
 }
 
@@ -13,7 +14,7 @@ $scrollButtonWidth: 2rem;
 
   width: $scrollButtonWidth;
   // Tab height
-  height: calc(1rem + #{spacing() * 2});
+  height: calc(1rem + #{spacing(md) * 2});
   padding: 0;
   border: 0;
 
@@ -40,8 +41,8 @@ $scrollButtonWidth: 2rem;
 .cobalt-tabs__nav-prev {
   background: linear-gradient(
     270deg,
-    rgba(255, 255, 255, 0) 0,
-    rgba(255, 255, 255, 1) 30%
+    transparent,
+    var(--c-background-secondary) 30%
   );
 
   &:hover .cobalt-tabs__nav-icon,
@@ -55,8 +56,8 @@ $scrollButtonWidth: 2rem;
 
   background: linear-gradient(
     90deg,
-    rgba(255, 255, 255, 0) 0,
-    rgba(255, 255, 255, 1) 30%
+    transparent,
+    var(--c-background-secondary) 30%
   );
 
   &:hover .cobalt-tabs__nav-icon,
@@ -101,7 +102,7 @@ $scrollButtonWidth: 2rem;
 }
 
 .cobalt-tabs__label {
-  @include text-color(subdued);
+  @include c-text-section-heading;
   @include bg-color(secondaryInteractive);
   position: relative;
 
@@ -109,7 +110,7 @@ $scrollButtonWidth: 2rem;
   flex: 1 0 auto;
   justify-content: center;
   align-items: center;
-  padding: spacing();
+  padding: spacing(md);
   border: 0;
 
   text-align: center;
@@ -117,9 +118,6 @@ $scrollButtonWidth: 2rem;
   white-space: nowrap;
   font-size: 1rem;
   line-height: 1;
-  text-transform: uppercase;
-  font-family: font-family(brand);
-  font-weight: 700;
 
   outline: none;
   background: none;
@@ -148,7 +146,7 @@ $scrollButtonWidth: 2rem;
     @include text-color(base);
 
     &:after {
-      @include semantic-color(accent, fill, background-color);
+      @include fill-bg-color(accent);
 
       transform: scaleX(1);
     }

package/styles/components/Tag/index.scss

@@ -1,6 +1,7 @@
 .cobalt- {
   &Tag {
     @include bg-color(neutral);
+    @include text-color(base);
     display: inline-block;
 
     padding: spacing("2xs") spacing(xs);
@@ -13,11 +14,11 @@
   }
 
   &Tag--muted {
-    @include text-color(subdued);
-    @include bg-color(neutralAlt);
+    opacity: 0.5;
   }
 
   &Tag--important {
+    // TOFIX Move to errorAlt for bg and text
     @include text-color(error);
 
     background-color: lighten(color(red), 24);