@drivy/cobalt 0.13.0

package/styles/components/Form/CheckablePill.scss

@@ -0,0 +1,150 @@
+@use "sass:math";
+
+.cobalt-CheckablePillField {
+  $self: &;
+  $height: 40px;
+  $border-width: 2px;
+  $animation-duration: 100ms;
+  $toggle-switch-focus-offset: math.div($height, 10);
+  $main-color: color(indigo);
+  $main-color-light: color(indigo);
+
+  position: relative;
+
+  &__LabelWrapper {
+    display: inline-block;
+
+    margin: 4px 0;
+
+    cursor: pointer;
+  }
+
+  &__Input {
+    position: absolute;
+
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+
+    opacity: 0;
+  }
+
+  &__Label {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+    height: $height;
+    box-sizing: border-box;
+    padding: 0 spacing(base);
+    border: $border-width solid color(acier);
+
+    line-height: $height - $border-width * 2;
+    color: $main-color-light;
+
+    border-radius: math.div($height, 2);
+    background-color: color(white);
+    box-shadow: 0 2px 6px 0 rgba(#000, 0.12);
+
+    transition: $animation-duration;
+
+    &:hover {
+      border-color: $main-color-light;
+
+      fill: $main-color;
+      box-shadow: 0 4px 4px 0 rgba(#000, 0.16);
+
+      transform: translateY(-1px);
+    }
+
+    &:after {
+      top: -1 * $toggle-switch-focus-offset;
+      left: -1 * $toggle-switch-focus-offset;
+
+      height: calc(100% + #{($toggle-switch-focus-offset) * 2});
+      width: calc(100% + #{($toggle-switch-focus-offset) * 2});
+
+      border-radius: math.div($height, 2);
+    }
+  }
+
+  &__Input:focus + #{ $self }__Label:after {
+    position: absolute;
+
+    box-shadow: 0 0 0 1px color(aller);
+    content: "";
+  }
+
+  &__Input:disabled + #{ $self }__Label {
+    border: $border-width solid color(acier);
+
+    cursor: default;
+    box-shadow: none;
+    background-color: color(acier, light);
+    opacity: 0.8;
+
+    transform: none;
+  }
+
+  &__Input:checked + #{ $self }__Label {
+    border-color: transparent;
+
+    color: color(white);
+
+    background-color: $main-color-light;
+  }
+
+  &--with-icon {
+    .cobalt-Icon {
+      margin-right: spacing(extra-tight);
+
+      fill: $main-color-light;
+
+      transition: fill $animation-duration ease-in-out;
+    }
+
+    #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {
+      fill: color(white);
+    }
+  }
+
+  &--error {
+    #{ $self }__Input + #{ $self }__Label {
+      border-color: color(essence);
+
+      color: $main-color-light;
+
+      background-color: color(white);
+    }
+
+    #{ $self }__Input:checked + #{ $self }__Label {
+      border-color: transparent;
+
+      color: color(white);
+
+      background-color: color(essence);
+
+      .cobalt-Icon {
+        fill: color(white);
+      }
+    }
+  }
+}
+
+.cobalt-CheckablePillsGroup {
+  @include form-field-container;
+
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+
+  .cobalt-CheckablePillField {
+    margin-right: spacing(tight);
+
+    &--with-icon {
+      white-space: nowrap;
+    }
+  }
+}

package/styles/components/Form/Checkmark.scss

@@ -0,0 +1,202 @@
+@import "./form";
+
+.cobalt- {
+  &CheckmarkField {
+    $self: &;
+
+    $disabled-color: color(acier, dark);
+    $error-color: $form-element--error-color;
+
+    $radio-checkmark-size: 20px;
+    $checkbox-checkmark-size: 18px;
+    $checkmark-color: color(indigo);
+
+    position: relative;
+
+    margin-bottom: spacing(extra-tight);
+    display: block;
+
+    font-weight: 400;
+    font-family: font-family(base);
+    font-size: font-size(body);
+    line-height: line-height(body);
+    color: color(graphite);
+
+    &__Input {
+      position: absolute;
+
+      width: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+
+      opacity: 0;
+
+      & + #{ $self }__Checkmark {
+        display: inline-block;
+
+        flex: 0 0 auto;
+
+        margin-right: spacing(tight);
+        border: 2px solid $checkmark-color;
+
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+        cursor: pointer;
+
+        transition: border-color 150ms ease-in-out;
+      }
+
+      &[disabled] ~ .cobalt-CheckmarkField__Label {
+        color: $disabled-color;
+      }
+
+      &:focus + #{ $self }__Checkmark {
+        box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.3);
+      }
+    }
+
+    &__Input[type="radio"] {
+      & + #{ $self }__Checkmark {
+        position: relative;
+        top: 3px;
+
+        width: $radio-checkmark-size;
+        height: $radio-checkmark-size;
+
+        border-radius: 50%;
+      }
+
+      & + #{ $self }__Checkmark::after {
+        position: absolute;
+
+        top: 3px;
+        left: 3px;
+
+        border: 5px solid $checkmark-color;
+
+        border-radius: 50%;
+
+        content: "";
+        opacity: 0;
+
+        background-color: $checkmark-color;
+
+        transition: transform 120ms ease-in-out;
+
+        transform: scale(0.4);
+
+        will-change: transform;
+      }
+
+      &:checked + #{ $self }__Checkmark::after {
+        opacity: 1;
+
+        transform: scale(1);
+      }
+
+      &[disabled] + #{ $self }__Checkmark {
+        border-color: $disabled-color;
+
+        box-shadow: none;
+      }
+
+      &[disabled]:checked ~ #{ $self }__Checkmark::after {
+        border-color: $disabled-color;
+
+        background-color: $disabled-color;
+      }
+    }
+
+    &__Input[type="checkbox"] {
+      & + #{ $self }__Checkmark {
+        position: relative;
+
+        top: 4px;
+
+        width: $checkbox-checkmark-size;
+        height: $checkbox-checkmark-size;
+
+        border-radius: 2px;
+
+        transition: background-color 120ms ease-in-out;
+      }
+
+      & + #{ $self }__Checkmark:after {
+        position: absolute;
+
+        display: none;
+
+        content: "";
+      }
+
+      &:checked + #{ $self }__Checkmark {
+        background-color: $checkmark-color;
+        will-change: background-color;
+      }
+
+      &:checked + #{ $self }__Checkmark:after {
+        top: -1px;
+        left: 4px;
+
+        display: block;
+
+        width: 5px;
+        height: 10px;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+
+        transform: rotate(45deg);
+      }
+
+      &[disabled] + #{ $self }__Checkmark {
+        border-color: $disabled-color;
+
+        box-shadow: none;
+      }
+
+      &[disabled]:checked + #{ $self }__Checkmark {
+        background-color: $disabled-color;
+      }
+    }
+
+    &__LabelWrapper {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      cursor: pointer;
+    }
+
+    &__Label {
+      display: inline-block;
+    }
+
+    &--error {
+      #{ $self }__Input + #{ $self }__Checkmark {
+        border-color: $error-color;
+      }
+
+      #{ $self }__Input:focus + #{ $self }__Checkmark {
+        box-shadow: 0 2px 12px 0 rgba($form-element--error-color, 0.36);
+      }
+
+      #{ $self }__Input[type="radio"]:checked + #{ $self }__Checkmark::after {
+        border-color: $error-color;
+
+        background-color: $error-color;
+      }
+
+      #{ $self }__Input[type="checkbox"]:checked + #{ $self }__Checkmark {
+        background-color: $error-color;
+      }
+    }
+  }
+
+  &ChoiceList {
+    @include form-field-container;
+
+    .cobalt-Hint {
+      margin: spacing(extra-tight) 0 0 spacing(medium);
+    }
+  }
+}

package/styles/components/Form/ComposedField.scss

@@ -0,0 +1,20 @@
+.cobalt- {
+  &ComposedFormField {
+    @include form-field-container;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: stretch;
+
+    & > * + * {
+      margin-left: spacing(tight);
+    }
+  }
+}
+
+@include breakpoint($until: sm) {
+  .cobalt-ComposedFormField > * + * {
+    margin-left: spacing(extra-tight);
+  }
+}

package/styles/components/Form/Fieldset.scss

@@ -0,0 +1,23 @@
+.cobalt- {
+  &Fieldset {
+    $border-width: 1px;
+
+    padding: (spacing(tight) -$border-width) 0 0 0;
+    border-top: $border-width solid color(acier, light);
+
+    & > legend {
+      @include text-style-title-small;
+
+      margin-bottom: spacing(extra-tight);
+      padding: 0 spacing(tight) 0 0;
+    }
+
+    &:not(:first-child) {
+      margin-top: spacing(medium);
+    }
+
+    & + & {
+      margin-top: spacing(loose);
+    }
+  }
+}

package/styles/components/Form/Hint.scss

@@ -0,0 +1,46 @@
+@import "./form";
+
+.cobalt- {
+  &Hint {
+    @include text-style-body;
+
+    position: relative;
+
+    margin-top: spacing(extra-tight);
+    margin-left: 1px;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+
+    color: color(graphite, light);
+
+    font-size: 13px;
+    line-height: 16px;
+
+    &__Icon {
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      flex-shrink: 0;
+      margin-right: spacing(extra-tight);
+    }
+
+    &--success {
+      color: $form-element--success-color;
+    }
+
+    &--error {
+      color: $form-element--error-color;
+    }
+
+    a {
+      color: color(blue);
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/styles/components/Form/Select.scss

@@ -0,0 +1,37 @@
+@import "./form";
+
+.cobalt- {
+  &SelectField {
+    $self: &;
+
+    @include form-field-container;
+
+    position: relative;
+
+    &__Input {
+      @include form-input-base($self);
+
+      padding-right: spacing(medium);
+
+      line-height: 20px;
+
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%2000000'><polygon points='0,0 100,0 50,50'/></svg>");
+      background-size: 10px;
+      background-position: calc(100% - 12px) 19px;
+      background-repeat: no-repeat;
+
+      -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+      -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+      appearance: none;
+
+      // select placeholder
+      &:invalid {
+        color: color(acier, dark) !important;
+      }
+
+      &[disabled] {
+        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(0,0,0,0.2)'><polygon points='0,0 100,0 50,50'/></svg>");
+      }
+    }
+  }
+}

package/styles/components/Form/Slider.scss

@@ -0,0 +1,71 @@
+@import "@reach/slider/styles.css";
+
+.cobalt- {
+  &slider {
+    $self: &;
+
+    @include withContext(".cobalt-FormField--withHint >") {
+      padding-bottom: spacing(tight);
+    }
+
+    width: 100%;
+
+    [data-reach-slider-input][data-orientation="horizontal"] {
+      height: 3px;
+      padding-top: spacing(tight);
+      padding-bottom: spacing(tight);
+      width: 100%;
+    }
+
+    [data-reach-slider-track] {
+      background: color(grey, light);
+    }
+
+    [data-reach-slider-track-highlight] {
+      background: color(indigo);
+    }
+
+    [data-reach-slider-handle] {
+      width: spacing(base);
+      height: spacing(base);
+      border-width: 0;
+
+      background: color(white);
+
+      box-shadow: elevation(light), 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);
+    }
+
+    [data-reach-slider-track][data-disabled] {
+      background: color(grey);
+    }
+
+    [data-reach-slider-track-highlight][data-disabled] {
+      background-color: color(grey);
+    }
+
+    [data-reach-slider-handle][aria-disabled] {
+      background-color: color(grey, lighter);
+    }
+
+    &__value-container {
+      font-size: font-size(body);
+      color: color(graphite);
+    }
+
+    &__value-meta {
+      color: color(graphite, light);
+    }
+
+    &--disabled {
+      #{ $self }__value-container {
+        color: color(graphite, light);
+      }
+    }
+  }
+}

package/styles/components/Form/Stepper.scss

@@ -0,0 +1,85 @@
+@import "./form";
+
+.cobalt- {
+  &Stepper {
+    @include form-field-container;
+
+    display: inline-block;
+    align-items: center;
+
+    width: auto !important;
+
+    font-family: font-family(base);
+
+    &__Wrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &__ContentWrapper {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 spacing(tight);
+      min-width: 96px;
+
+      font-size: 32px;
+      font-weight: 500;
+      color: color(indigo);
+    }
+
+    &__Meta {
+      margin-left: spacing(extra-tight);
+
+      font-size: 15px;
+
+      color: color(graphite, light);
+    }
+
+    &__HiddenInput {
+      display: none;
+    }
+
+    &__ActionButton {
+      min-width: 32px;
+      min-height: 32px;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+
+      font-size: 18px;
+
+      border-radius: 50%;
+      user-select: none;
+
+      &:focus {
+        outline: none;
+        box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.3);
+      }
+
+      &--disabled {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    &--disabled {
+      .cobalt-Stepper__ContentWrapper {
+        color: color(acier);
+      }
+    }
+
+    &--success {
+      .cobalt-Stepper__ContentWrapper {
+        color: $form-element--success-color;
+      }
+    }
+
+    &--error {
+      .cobalt-Stepper__ContentWrapper {
+        color: $form-element--error-color;
+      }
+    }
+  }
+}

package/styles/components/Form/TextArea.scss

@@ -0,0 +1,68 @@
+@import "./form";
+
+.cobalt- {
+  &TextAreaField {
+    $self: &;
+
+    @include form-field-container;
+
+    position: relative;
+
+    &__Input {
+      @include form-input-base($self);
+
+      min-height: 88px;
+
+      width: 100%;
+
+      vertical-align: top;
+
+      resize: vertical;
+
+      &::placeholder {
+        color: color(acier, dark);
+      }
+    }
+
+    &__RemainingChars {
+      @include withContext(".cobalt-FormField--withHint") {
+        bottom: spacing(base);
+      }
+
+      position: absolute;
+
+      bottom: spacing(extra-tight);
+
+      width: 100%;
+
+      padding: 0 12px;
+
+      font-size: 13px;
+      line-height: 24px;
+      text-align: right;
+
+      color: color(acier, dark);
+
+      animation-name: cobalt-TextAreaField--fade-in;
+      animation-duration: 150ms;
+
+      pointer-events: none;
+    }
+
+    &--withLimit {
+      #{ $self }__Input {
+        padding-bottom: 36px;
+      }
+    }
+  }
+}
+
+@keyframes cobalt-TextAreaField--fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}