@drivy/cobalt 0.13.0

package/styles/components/Form/TextInput.scss

@@ -0,0 +1,59 @@
+@import "./form";
+
+.cobalt- {
+  &TextField {
+    $self: &;
+    $field-icon-color: color(indigo);
+
+    @include form-field-container;
+
+    position: relative;
+
+    &__Icon {
+      position: absolute;
+      top: 0;
+      left: spacing(extra-tight);
+
+      height: 100%;
+      display: flex;
+
+      fill: color(acier, dark);
+
+      .cobalt-Icon {
+        transition: fill 150ms ease-in-out;
+      }
+    }
+
+    &__Input[type] {
+      @include form-input-base($self);
+
+      &::placeholder {
+        color: color(acier, dark);
+      }
+    }
+
+    &--withIcon {
+      #{ $self }__Input {
+        padding-left: 40px;
+      }
+
+      #{ $self }__Input + #{ $self }__Icon {
+        fill: $field-icon-color;
+        pointer-events: none;
+      }
+
+      #{ $self }__Input:placeholder-shown + #{ $self }__Icon {
+        fill: color(acier, dark);
+      }
+
+      #{ $self }__Input:focus + #{ $self }__Icon,
+      #{ $self }__Input:focus:placeholder-shown + #{ $self }__Icon {
+        fill: $field-icon-color;
+      }
+
+      #{ $self }__Input:disabled + #{ $self }__Icon {
+        fill: color(acier, dark);
+      }
+    }
+  }
+}

package/styles/components/Form/ToggleSwitch.scss

@@ -0,0 +1,259 @@
+@use "sass:math";
+
+@import "./form";
+
+$toggle-switch-size-default: 18px;
+$toggle-switch-size-large: 28px;
+
+@mixin toggleComputedStyles($size) {
+  $border-width: 2px;
+  $width: $size * 2 - ($border-width * 2);
+  $animation-extra-width: round(math.div($size, 8));
+  $toggle-switch-focus-offset: math.div($size, 10);
+
+  .cobalt- {
+    &ToggleSwitchField {
+      &__ToggleSwitchSlider {
+        width: $width;
+        height: $size;
+
+        border-radius: $size;
+      }
+
+      &__ToggleSwitchSlider:before {
+        height: $size - ($border-width * 2);
+        width: $size - ($border-width * 2);
+
+        border-radius: $size;
+
+        box-shadow: 0 2px math.div($size, 5) 0 rgba(0, 0, 0, 0.3);
+      }
+
+      &__ToggleSwitchSlider:after {
+        top: -$toggle-switch-focus-offset;
+        left: -$toggle-switch-focus-offset;
+
+        height: calc(100% + #{($toggle-switch-focus-offset) * 2});
+        width: calc(100% + #{($toggle-switch-focus-offset) * 2});
+
+        border-radius: $size;
+      }
+
+      &__Input {
+        &:not([disabled])
+          + .cobalt-ToggleSwitchField__ToggleSwitch
+          .cobalt-ToggleSwitchField__ToggleSwitchSlider:active:before {
+          width: $size + $animation-extra-width;
+        }
+
+        &:checked
+          + .cobalt-ToggleSwitchField__ToggleSwitch
+          .cobalt-ToggleSwitchField__ToggleSwitchSlider:before {
+          transform: translateX($width - $size);
+        }
+
+        &:not([disabled]):checked:active
+          + .cobalt-ToggleSwitchField__ToggleSwitch
+          .cobalt-ToggleSwitchField__ToggleSwitchSlider:before {
+          transform: translateX(
+            $width - $size - $animation-extra-width - ($border-width * 2)
+          );
+        }
+
+        &:not([disabled]):active
+          + .cobalt-ToggleSwitchField__ToggleSwitch
+          .cobalt-ToggleSwitchField__ToggleSwitchSlider:before {
+          width: $size + $animation-extra-width;
+        }
+      }
+    }
+  }
+}
+
+.cobalt- {
+  &ToggleSwitchField {
+    $animation-duration: 200ms;
+
+    @include form-field-container;
+    @include toggleComputedStyles($toggle-switch-size-default);
+
+    position: relative;
+
+    margin-bottom: spacing(extra-tight);
+
+    align-items: center;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    &:not(.cobalt-ToggleSwitchField--standalone) {
+      display: block;
+    }
+
+    &__LabelWrapper {
+      position: relative;
+
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-direction: row-reverse;
+    }
+
+    &__Label {
+      display: inline-block;
+
+      flex: 1;
+
+      padding: 0 spacing(tight) 0 0;
+
+      font-weight: 400;
+      font-family: font-family(base);
+      font-size: font-size(body);
+      line-height: line-height(body);
+      color: color(graphite);
+    }
+
+    &__ToggleSwitch {
+      position: relative;
+
+      top: 1px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    &__ToggleSwitchSlider {
+      display: inline-block;
+
+      background-color: color(acier);
+
+      transition: $animation-duration;
+    }
+
+    &__ToggleSwitchSlider:before {
+      position: absolute;
+
+      left: 2px;
+      bottom: 2px;
+
+      content: "";
+
+      background-color: color(white);
+
+      transition: $animation-duration;
+      will-change: transform;
+    }
+
+    &__ToggleSwitchSlider:after {
+      position: absolute;
+
+      opacity: 0;
+
+      box-shadow: 0 0 0 1px color(aller);
+
+      content: "";
+    }
+
+    &__Input {
+      position: absolute;
+
+      width: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+
+      opacity: 0;
+
+      &:checked
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider {
+        background-color: color(indigo);
+      }
+
+      &:not([disabled]) + .cobalt-ToggleSwitchField__ToggleSwitch,
+      &:not([disabled]) ~ .cobalt-ToggleSwitchField__Label {
+        cursor: pointer;
+      }
+
+      &:not([disabled]):focus
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider:after {
+        opacity: 1;
+      }
+
+      &[disabled]
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider {
+        background-color: color(acier, light);
+      }
+
+      &[disabled]
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider:before {
+        background-color: color(white);
+        box-shadow: none;
+      }
+
+      &[disabled]:checked
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider {
+        background-color: color(acier, dark);
+      }
+
+      &[disabled] ~ .cobalt-ToggleSwitchField__Label {
+        color: color(acier, dark);
+      }
+
+      &:focus
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider:after {
+        opacity: 1;
+      }
+    }
+
+    &--error {
+      .cobalt-ToggleSwitchField__Input
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider {
+        box-shadow: inset 0 0 0 2px color(essence);
+      }
+
+      .cobalt-ToggleSwitchField__Input:focus
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider {
+        box-shadow: inset 0 0 0 2px color(essence);
+      }
+
+      .cobalt-ToggleSwitchField__Input:checked
+        + .cobalt-ToggleSwitchField__ToggleSwitch
+        .cobalt-ToggleSwitchField__ToggleSwitchSlider {
+        background-color: color(essence);
+      }
+    }
+
+    .cobalt-Hint {
+      margin: spacing(extra-tight) 0 0 1px;
+    }
+
+    &--large {
+      @include toggleComputedStyles($toggle-switch-size-large);
+    }
+
+    &--standalone {
+      width: auto;
+    }
+
+    &--position-left {
+      width: auto;
+
+      .cobalt-ToggleSwitchField__LabelWrapper {
+        flex-direction: row;
+      }
+
+      .cobalt-ToggleSwitchField__Label {
+        padding: 0 0 0 spacing(tight);
+      }
+    }
+  }
+}

package/styles/components/Form/field.scss

@@ -0,0 +1,70 @@
+$formfield-minwidth: 100px;
+$formfield-maxwidth: 600px;
+
+@mixin form-field-container {
+  @include withContext(".cobalt-FormField--withHint >") {
+    padding-bottom: spacing(tight);
+  }
+
+  width: 100%;
+
+  display: inline-block;
+
+  padding-bottom: 0;
+
+  transition: padding-bottom 150ms;
+}
+
+.cobalt- {
+  &FormField {
+    margin: spacing(extra-tight) 0 spacing(tight) 0;
+
+    min-width: $formfield-minwidth;
+    max-width: $formfield-maxwidth;
+
+    justify-content: center;
+
+    align-items: flex-start;
+
+    display: flex;
+    flex-direction: column;
+
+    font-family: font-family(base);
+
+    > .cobalt-FormField__Label {
+      display: inline-block;
+
+      padding: 0 0 10px 1px;
+
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 18px;
+      color: color(graphite);
+    }
+
+    .cobalt-Hint {
+      margin-top: -(spacing(extra-tight)); // 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);
+
+      > .cobalt-FormField__Label {
+        margin-top: spacing(extra-tight);
+      }
+    }
+  }
+}
+
+@keyframes cobalt-FormField__Hint--fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/styles/components/Form/form.scss

@@ -0,0 +1,87 @@
+$form-element--default-color: color(acier, dark);
+$form-element--default-active-color: color(indigo);
+$form-element--success-color: color(signal);
+$form-element--error-color: color(essence);
+
+@mixin form-input-base($container) {
+  @include withContext(#{$container}--success) {
+    border-color: $form-element--success-color;
+
+    &:not(:disabled):hover {
+      border: 1px solid $form-element--success-color;
+    }
+
+    &:not(:disabled):focus {
+      border-color: $form-element--success-color;
+      border-width: 1px;
+
+      box-shadow: 0 2px 12px 0 rgba($form-element--success-color, 0.16),
+        inset 0 0 0 1px $form-element--success-color;
+    }
+  }
+
+  @include withContext(#{$container}--error) {
+    border-color: $form-element--error-color;
+
+    &:not(:disabled):hover {
+      border: 1px solid $form-element--error-color;
+    }
+
+    &:not(:disabled):focus {
+      border-color: $form-element--error-color;
+      border-width: 1px;
+
+      box-shadow: 0 2px 12px 0 rgba($form-element--error-color, 0.16),
+        inset 0 0 0 1px $form-element--error-color;
+    }
+  }
+
+  box-sizing: border-box;
+
+  width: 100%;
+  height: 44px;
+  padding: 10px 12px;
+
+  border: 1px solid $form-element--default-color;
+
+  color: color(graphite);
+
+  font-family: font-family(base);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+
+  background-color: color(white);
+
+  border-radius: 4px;
+
+  transition: border-color 150ms ease-in-out;
+
+  &:not(:disabled):hover {
+    border: 1px solid $form-element--default-color;
+
+    color: color(graphite);
+
+    box-shadow: elevation(light);
+  }
+
+  &:not(:disabled):focus {
+    border-color: $form-element--default-active-color;
+
+    border-width: 1px;
+
+    outline: none;
+
+    box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.16),
+      inset 0 0 0 1px $form-element--default-active-color;
+  }
+
+  &[disabled] {
+    border-color: $form-element--default-color;
+
+    color: color(graphite, light);
+
+    background-color: color(acier, light);
+    pointer-events: none;
+  }
+}

package/styles/components/Form/index.scss

@@ -0,0 +1,13 @@
+@import "./field";
+@import "./Checkmark";
+@import "./Select";
+@import "./TextArea";
+@import "./TextInput";
+@import "./Hint";
+@import "./Fieldset";
+@import "./ComposedField";
+@import "./ToggleSwitch";
+@import "./Stepper";
+@import "./CheckablePill";
+@import "./Slider";
+@import "./Autocomplete/index";

package/styles/components/Helper/index.scss

@@ -0,0 +1,16 @@
+.cobalt-helper {
+  padding: spacing(sm);
+
+  background-color: fade-out(color(purple), 0.92);
+  border-radius: border-radius(xl);
+
+  &__title {
+    @include text-style-title-small;
+    color: color(graphite);
+  }
+
+  &__content {
+    margin-top: spacing(xs);
+    margin-bottom: spacing(sm);
+  }
+}

package/styles/components/HorizontalList/index.scss

@@ -0,0 +1,46 @@
+@mixin fit() {
+  overflow-x: visible;
+
+  & > *:not(.cobalt-horizontal-list__padding-block) {
+    width: 100%;
+  }
+}
+
+.cobalt- {
+  &horizontal-list {
+    display: flex;
+
+    flex-wrap: nowrap;
+    overflow-x: auto;
+
+    -webkit-overflow-scrolling: touch;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+@include breakpoint($from: xs) {
+  .xs\:cobalt-horizontal-list--fit {
+    @include fit();
+  }
+}
+
+@include breakpoint($from: sm) {
+  .sm\:cobalt-horizontal-list--fit {
+    @include fit();
+  }
+}
+
+@include breakpoint($from: md) {
+  .md\:cobalt-horizontal-list--fit {
+    @include fit();
+  }
+}
+
+@include breakpoint($from: lg) {
+  .lg\:cobalt-horizontal-list--fit {
+    @include fit();
+  }
+}

package/styles/components/Icon/index.scss

@@ -0,0 +1,125 @@
+@use "sass:math";
+
+.cobalt- {
+  &Icon {
+    display: inline-block;
+    height: 24px;
+    width: 24px;
+    max-height: 100%;
+    max-width: 100%;
+    // TO REMOVE IN ORDER TO USE UTILITIES FOR MARGINS
+    margin: auto;
+
+    vertical-align: middle;
+    line-height: 0;
+
+    fill: currentColor;
+
+    > svg {
+      display: inline-block;
+      width: 100%;
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+
+  &Icon--colorAsphalt {
+    // deprecated
+    fill: color(indigo, dark);
+  }
+
+  &Icon--colorAsphaltLight {
+    // deprecated
+    fill: color(indigo);
+  }
+
+  &Icon--colorAller {
+    // deprecated
+    fill: color(turquoise);
+  }
+
+  &Icon--colorEssence {
+    // deprecated
+    fill: color(red);
+  }
+
+  &Icon--colorSignal {
+    // deprecated
+    fill: color(green);
+  }
+
+  &Icon--contained {
+    height: 40px;
+    width: 40px;
+    padding: math.div(40px - 24px, 2);
+
+    border-radius: 50%;
+    background: #fff;
+    box-shadow: elevation(light);
+  }
+
+  &Icon--size16 {
+    height: 16px;
+    width: 16px;
+  }
+
+  &Icon--size20 {
+    height: 20px;
+    width: 20px;
+
+    &.cobalt-Icon--contained {
+      height: 32px;
+      width: 32px;
+
+      padding: math.div(32px - 20px, 2);
+    }
+  }
+
+  &Icon--size32 {
+    height: 32px;
+    width: 32px;
+
+    &.cobalt-Icon--contained {
+      height: 52px;
+      width: 52px;
+
+      padding: math.div(52px - 32px, 2);
+    }
+  }
+
+  &Icon--loading {
+    animation: cobalt-animation__full-rotation 0.75s linear infinite;
+  }
+}
+
+@mixin icon-color-class($color-name, $value) {
+  .cobalt-Icon--color#{$color-name} {
+    fill: $value;
+  }
+}
+
+@mixin generate-icon-color-classes($color-map) {
+  @each $color, $value in $color-map {
+    $class-prefix: ".cobalt-Icon--color";
+    $capitalizedColor: capitalize(to-string($color));
+    @if type-of($value) == color {
+      @include icon-color-class(#{$capitalizedColor}, $value);
+    } @else {
+      $sub-map: $value;
+      @each $variant, $variant-value in $sub-map {
+        @if $variant == "base" {
+          @include icon-color-class(#{$capitalizedColor}, $variant-value);
+        } @else {
+          $capitalizedVariant: capitalize(to-string($variant));
+
+          @include icon-color-class(
+            #{$capitalizedColor}#{$capitalizedVariant},
+            $variant-value
+          );
+        }
+      }
+    }
+  }
+}
+
+@include generate-icon-color-classes($color-data);