@drivy/cobalt 0.13.0

package/styles/components/Modal/index.scss

@@ -0,0 +1,103 @@
+@import "@reach/dialog/styles.css";
+
+$reach-ui-dialog-margin-top: 10vh;
+
+.cobalt-modal {
+  display: flex;
+  flex-direction: column;
+  padding: spacing(none);
+
+  &__overlay[data-reach-dialog-overlay] {
+    z-index: zx(modal);
+
+    overflow: hidden;
+
+    background-color: fade-out(black, 0.2);
+  }
+
+  &[data-reach-dialog-content] {
+    max-height: calc(100% - 2 * #{$reach-ui-dialog-margin-top});
+
+    box-shadow: 0 6px 36px fade-out(black, 0.8);
+  }
+
+  &[data-reach-dialog-content]:not(.cobalt-modal--mobile) {
+    max-width: 38rem;
+    width: 80vw;
+  }
+
+  &--desktop {
+    position: relative;
+
+    border-radius: border-radius(lg);
+  }
+
+  &--mobile {
+    position: fixed;
+
+    margin-bottom: spacing(none);
+    width: 100%;
+
+    &[data-reach-dialog-content] {
+      bottom: 0;
+
+      max-height: calc(100% - #{spacing(loose)});
+
+      border-radius: 16px 16px 0 0;
+    }
+  }
+
+  &--overflowHidden {
+    overflow: hidden;
+  }
+
+  &-body {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+
+    &--bodySpacing {
+      padding: spacing(lg) spacing(md);
+
+      &.cobalt-modal-body--hasHeader {
+        padding-top: spacing(sm);
+      }
+
+      &.cobalt-modal-body--hasFooter {
+        padding-bottom: spacing(sm);
+      }
+    }
+  }
+
+  &-footer {
+    /* FIXME border function doesn't handle color variant */
+    border-top: border(grey);
+    border-color: color(grey, light);
+    padding: spacing(sm);
+  }
+
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: spacing(md);
+    /* FIXME border function doesn't handle color variant */
+    border-bottom: border(grey);
+    border-color: color(grey, light);
+
+    &__title {
+      @include c-text-title-md;
+      margin: spacing(none);
+
+      color: color(indigo, dark);
+    }
+
+    &__close-button {
+      flex: none;
+      border: 0;
+      padding: spacing(none);
+
+      cursor: cursor(pointer);
+      background-color: color(transparent);
+    }
+  }
+}

package/styles/components/Note/index.scss

@@ -0,0 +1,18 @@
+.cobalt- {
+  &Note {
+    @include text-style-body;
+    @include text-style--bodySubdued;
+
+    display: inline-block;
+
+    padding: spacing(tight);
+
+    background-color: color(acier, lighter);
+
+    border-radius: border-radius(x-large);
+  }
+
+  &Note--fullWidth {
+    display: block;
+  }
+}

package/styles/components/Pill/index.scss

@@ -0,0 +1,56 @@
+$pill-height: 28px;
+$group-item-spacing: spacing(extra-tight);
+
+.cobalt- {
+  &Pill {
+    display: inline-flex;
+    align-items: center;
+
+    height: $pill-height;
+    padding: spacing(unit) spacing(tight);
+
+    font-size: 13px;
+    white-space: nowrap;
+
+    color: color(indigo);
+
+    border-radius: $pill-height;
+
+    background-color: color(acier, lighter);
+  }
+
+  &Pill--large {
+    $pill-height: 40px;
+    height: $pill-height;
+    padding: spacing(extra-tight) spacing();
+
+    border-radius: $pill-height;
+  }
+
+  &Pill--colorAller {
+    color: color(aller);
+  }
+
+  &Pill--overlayed {
+    color: color(white);
+
+    background-color: rgba(color(graphite), 0.5);
+  }
+
+  &Pill__Icon {
+    margin-right: spacing(unit);
+  }
+
+  &PillGroup {
+    margin-top: (-1 * $group-item-spacing);
+    margin-left: (-1 * $group-item-spacing);
+  }
+
+  &PillGroup__Item {
+    display: inline-block;
+    margin-top: $group-item-spacing;
+    margin-left: $group-item-spacing;
+
+    vertical-align: top;
+  }
+}

package/styles/components/Popover/index.scss

@@ -0,0 +1,18 @@
+@import "tippy.js/dist/tippy.css";
+@import "tippy.js/themes/light.css";
+@import "tippy.js/animations/shift-away-subtle.css";
+
+[data-theme~="cobalt-popover"] {
+  &.tippy-box {
+    box-shadow: elevation(strong);
+  }
+
+  .tippy-content {
+    padding: 0;
+    min-width: 16rem;
+  }
+}
+
+.cobalt-popover--bodySpacing {
+  padding: spacing(md);
+}

package/styles/components/PriceTable/index.scss

@@ -0,0 +1,33 @@
+.cobalt- {
+  &PriceTable__Row {
+    @include text-style-body;
+
+    display: flex;
+    justify-content: space-between;
+
+    &:not(:last-child) {
+      margin-bottom: spacing(tight);
+    }
+  }
+
+  &PriceTable__Label {
+    margin-right: spacing(unit);
+    width: 100%;
+  }
+
+  &PriceTable__Value {
+    font-weight: 600;
+    white-space: nowrap;
+
+    &--discount {
+      color: color(signal);
+    }
+
+    &:empty:before {
+      color: color(graphite, light);
+      font-weight: normal;
+
+      content: "—";
+    }
+  }
+}

package/styles/components/ProgressBar/index.scss

@@ -0,0 +1,57 @@
+.cobalt- {
+  &ProgressBar__TitleSection {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &ProgressBar__Progression {
+    @include text-style-title;
+    color: color(aller);
+  }
+
+  &ProgressBar__Title {
+    @include text-style-title-tiny;
+  }
+
+  &ProgressBar__CompletedCheckbox {
+    path {
+      fill: color(aller);
+    }
+  }
+
+  &ProgressBar__Container {
+    position: relative;
+
+    margin-top: spacing(tight);
+
+    height: spacing(unit);
+    width: 100%;
+
+    border-radius: 2px;
+    background-color: color(acier, light);
+  }
+
+  &ProgressBar__Foreground {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    height: spacing(unit);
+
+    border-radius: 2px;
+    background-color: color(aller);
+  }
+
+  &ProgressBar__Tick {
+    position: absolute;
+    top: -6px;
+    right: 0;
+
+    height: 4 * spacing(unit);
+    width: spacing(unit);
+
+    border-radius: 2px;
+    background-color: color(acier, light);
+  }
+}

package/styles/components/TabBar/index.scss

@@ -0,0 +1,161 @@
+.cobalt- {
+  &TabBar {
+    position: relative;
+
+    width: 100%;
+    display: flex;
+  }
+
+  &TabBar__ScrollControl {
+    flex: 0 0 spacing(medium);
+    display: flex;
+  }
+
+  &TabBar__ScrollButton {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 100%;
+
+    border: 0;
+    margin: 0;
+
+    vertical-align: middle;
+    text-decoration: none;
+
+    background-color: transparent;
+    cursor: pointer;
+    outline: none;
+    border-radius: 0;
+    appearance: none;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+  }
+
+  &TabScroller {
+    flex: 1 1 auto;
+    overflow-y: hidden;
+  }
+
+  &TabScroller--underlined:after {
+    position: absolute;
+    bottom: 0;
+
+    width: 100%;
+    height: 1px;
+
+    content: "";
+    background-color: color(acier);
+  }
+
+  &TabScroller__ScrollArea {
+    position: relative;
+
+    display: flex;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    height: 100%;
+    flex: 1 0 auto;
+    box-sizing: content-box;
+
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &TabScroller__ScrollArea--leftAlign {
+    justify-content: flex-start;
+
+    .cobalt-Tab {
+      flex-grow: 0;
+    }
+  }
+
+  &Tab {
+    position: relative;
+    z-index: zx("above");
+
+    display: flex;
+    flex: 1 0 auto;
+    justify-content: center;
+    height: 17 * spacing(unit);
+    padding: 0 spacing();
+
+    box-sizing: border-box;
+    border: 0;
+
+    text-align: center;
+    text-decoration: none;
+    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;
+    cursor: pointer;
+
+    transition: 0.2s color;
+    appearance: none;
+
+    &:after {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+
+      display: block;
+      height: 3px;
+
+      content: "";
+
+      background: transparent;
+
+      transform: scaleX(0);
+      transition: transform ease-out 0.15s;
+    }
+
+    &:hover,
+    &:focus {
+      text-decoration: inherit;
+
+      background: color(acier, lighter);
+    }
+
+    &[aria-selected="true"] {
+      color: color(asphalt);
+
+      &:after {
+        background: color(purple);
+
+        transform: scaleX(1);
+      }
+    }
+  }
+
+  &Tab--inCard {
+    text-transform: none;
+
+    &:after {
+      display: none;
+    }
+  }
+
+  &Tab__Content {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: inherit;
+    pointer-events: none;
+  }
+}

package/styles/components/Tabs/index.scss

@@ -0,0 +1,172 @@
+@import "@reach/tabs/styles.css";
+
+$scrollButtonWidth: 2rem;
+
+.cobalt-tabs {
+  position: relative;
+}
+
+.cobalt-tabs__nav-prev,
+.cobalt-tabs__nav-next {
+  position: absolute;
+  top: 0;
+
+  width: $scrollButtonWidth;
+  // Tab height
+  height: calc(1rem + #{spacing() * 2});
+  padding: 0;
+  border: 0;
+
+  cursor: pointer;
+  background: none;
+
+  .cobalt-tabs__nav-icon {
+    margin-left: 0;
+
+    transition: margin-left 0.2s;
+  }
+
+  &[disabled] {
+    opacity: 0.2;
+    cursor: not-allowed;
+
+    &:hover .cobalt-tabs__nav-icon,
+    &:focus .cobalt-tabs__nav-icon {
+      margin-left: 0;
+    }
+  }
+}
+
+.cobalt-tabs__nav-prev {
+  background: linear-gradient(
+    270deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 1) 30%
+  );
+
+  &:hover .cobalt-tabs__nav-icon,
+  &:focus .cobalt-tabs__nav-icon {
+    margin-left: -0.4rem;
+  }
+}
+
+.cobalt-tabs__nav-next {
+  right: 0;
+
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0) 0,
+    rgba(255, 255, 255, 1) 30%
+  );
+
+  &:hover .cobalt-tabs__nav-icon,
+  &:focus .cobalt-tabs__nav-icon {
+    margin-left: 0.4rem;
+  }
+}
+
+.cobalt-tabs__labels {
+  position: relative;
+
+  width: 100%;
+
+  background: none;
+
+  &.cobalt-tabs__labels--scrollable {
+    padding: 0 $scrollButtonWidth;
+
+    overflow-x: scroll;
+    overflow-y: hidden;
+
+    // Hide horizontal scrolling bar
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    // trick to force a padding-right in the scrollable tab list
+    &:after {
+      right: 0;
+
+      min-width: 2rem;
+      max-width: 2rem;
+      display: block;
+
+      content: "";
+    }
+  }
+}
+
+.cobalt-tabs__label {
+  position: relative;
+
+  display: flex;
+  flex: 1 0 auto;
+  justify-content: center;
+  align-items: center;
+  padding: spacing();
+  border: 0;
+
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  font-size: 1rem;
+  line-height: 1;
+  text-transform: uppercase;
+  color: color(graphite, light);
+  font-family: font-family(brand);
+  font-weight: 700;
+
+  outline: none;
+  background: none;
+  cursor: pointer;
+
+  transition: 0.2s color;
+
+  &:hover,
+  &:focus {
+    background: color(acier, lighter);
+  }
+
+  &:after {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    display: block;
+    height: 3px;
+
+    content: "";
+
+    background: transparent;
+
+    transform: scaleX(0);
+    transition: transform ease-out 0.15s;
+  }
+
+  &.cobalt-tabs__label--selected {
+    color: color(asphalt);
+
+    &:after {
+      background: color(purple);
+
+      transform: scaleX(1);
+    }
+  }
+}
+
+.cobalt-tabs__labels--subLevel {
+  .cobalt-tabs__label {
+    flex: 0 0 auto;
+
+    text-transform: none;
+
+    &:after {
+      background: transparent;
+    }
+  }
+}

package/styles/components/Tag/index.scss

@@ -0,0 +1,27 @@
+.cobalt- {
+  &Tag {
+    display: inline-block;
+
+    padding: spacing(unit) spacing(extra-tight);
+
+    font-size: 13px;
+
+    font-weight: 600;
+
+    background-color: color(acier, light);
+
+    border-radius: border-radius();
+  }
+
+  &Tag--muted {
+    color: color(graphite, light);
+
+    background-color: color(acier, lighter);
+  }
+
+  &Tag--important {
+    color: color(essence);
+
+    background-color: lighten(color(essence), 24);
+  }
+}

package/styles/components/TextContainer/index.scss

@@ -0,0 +1,70 @@
+.cobalt- {
+  &TextContainer {
+    > *:not(:last-child) {
+      margin-bottom: spacing(tight);
+    }
+
+    > h1 {
+      @include text-style-title-large;
+    }
+
+    > h2 {
+      @include text-style-title;
+    }
+
+    > h3 {
+      @include text-style-title-small;
+    }
+
+    > h4,
+    > h5,
+    > h6 {
+      @include text-style-title-tiny;
+    }
+
+    > p {
+      @include text-style-body;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    ul,
+    ol {
+      padding-left: spacing(loose);
+
+      ul {
+        list-style-type: circle;
+      }
+
+      ol {
+        list-style-type: lower-latin;
+      }
+    }
+
+    a {
+      color: color(blue);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+
+    hr {
+      border: 0;
+      border-top: 1px solid color(acier, light);
+      margin: (spacing() - 1px) spacing(none);
+    }
+
+    img {
+      height: auto;
+      max-width: 100%;
+    }
+  }
+}