@drivy/cobalt 0.13.0

package/styles/components/Buttons/index.scss

@@ -0,0 +1,193 @@
+@use "sass:math";
+
+@mixin cob-button-sizing(
+  $height: null,
+  $line-height: null,
+  $font-size: null,
+  $horizontal-padding: null
+) {
+  $border-width: 2px;
+  $vertical-padding: math.div($height - $line-height, 2) - $border-width;
+
+  @if $font-size > $line-height {
+    @error "Invalid line-height";
+  }
+
+  min-height: $height;
+  min-width: $height;
+  padding: $vertical-padding $horizontal-padding;
+
+  border-width: $border-width;
+
+  font-size: $font-size;
+  line-height: $line-height;
+}
+
+@mixin cob-button-filled($button-color, $hover-color, $active-color) {
+  border-color: $button-color;
+
+  color: color(white);
+
+  background-color: $button-color;
+
+  &:hover {
+    border-color: $hover-color;
+
+    color: color(white);
+
+    background-color: $hover-color;
+  }
+
+  &:active {
+    border-color: $active-color;
+
+    color: color(white);
+
+    background-color: $active-color;
+  }
+}
+
+.cob-Button {
+  @include cob-button-sizing(
+    $height: 40px,
+    $line-height: 20px,
+    $font-size: 16px,
+    $horizontal-padding: spacing()
+  );
+
+  position: relative;
+
+  display: inline-flex;
+
+  align-items: center;
+  justify-content: center;
+  border-style: solid;
+
+  text-decoration: none;
+  font-family: font-family(brand);
+  font-weight: 600;
+  text-align: center;
+
+  border-radius: border-radius(md);
+  box-shadow: 0 2px 8px 0 rgba(#000, 0.08);
+
+  cursor: pointer;
+  user-select: none;
+  transition-property: background-color, border, box-shadow, color, transform,
+    fill;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-out;
+  appearance: none;
+
+  &:hover {
+    text-decoration: none;
+
+    box-shadow: 0 4px 4px 0 rgba(#000, 0.16);
+
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    box-shadow: none;
+
+    transform: none;
+  }
+
+  .cob-Button__loading-icon {
+    position: absolute;
+
+    margin: auto;
+  }
+
+  &__Icon {
+    // icons are displayed in 24x24px, the following lines prevents the icon
+    // from adding to the height of the button
+    margin-top: -2px;
+    margin-bottom: -2px;
+
+    &--left {
+      margin-right: spacing(xs);
+    }
+
+    &--right {
+      margin-left: spacing(xs);
+    }
+  }
+
+  &[aria-busy="true"] .cob-Button__content {
+    color: color(transparent);
+  }
+
+  &.cob-Button--disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+    box-shadow: none;
+
+    transform: none;
+
+    &:hover,
+    &:active {
+      box-shadow: none;
+    }
+  }
+
+  &--rounded {
+    border-radius: border-radius(full);
+  }
+
+  &--fullWidth {
+    display: flex;
+    max-width: 600px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &--large {
+    @include cob-button-sizing(
+      $height: 56px,
+      $line-height: 24px,
+      $font-size: 18px,
+      $horizontal-padding: spacing(medium)
+    );
+  }
+}
+
+.cobalt-buttons-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: -#{spacing(sm)};
+
+  &--right {
+    justify-content: flex-end;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+
+  &__item {
+    margin-top: spacing(sm);
+
+    &:not(.cobalt-buttons-group__item--fullWidth):not(.cobalt-buttons-group__item--xs\:fullWidth) {
+      margin-right: spacing(sm);
+    }
+
+    &--fullWidth {
+      flex: 1 1 auto;
+    }
+
+    // Enable fullWidth only on small screens
+    &--xs\:fullWidth {
+      @include breakpoint($until: xs) {
+        flex: 1 1 auto;
+      }
+    }
+  }
+}
+
+@import "./BrandButton/index.scss";
+@import "./InversedButton/index.scss";
+@import "./GhostButton/index.scss";
+@import "./DefaultButton/index.scss";

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -0,0 +1,345 @@
+@use "sass:math";
+
+.cobalt-CalendarRangePicker {
+  $calendar-start-end-day-color: color(purple);
+  $calendar-start-end-day-font-color: color(white);
+  $calendar-range-day-color: lighten(color(purple, light), 29);
+  $calendar-selected-day-invalid-color: color(red);
+  $calendar-range-day-invalid-color: lighten(color(red), 20);
+  $calendar-out-of-range-color: darken($calendar-range-day-invalid-color, 8);
+
+  $calendar-day-inner-height: 24px;
+  $calendar-day-padding: 6px;
+  $calendar-day-size: $calendar-day-inner-height + ($calendar-day-padding * 2);
+  $calendar-start-end-size: $calendar-day-inner-height + 8px;
+
+  @function crossMonthBorder($color) {
+    @return 10px solid $color;
+  }
+
+  @mixin start-range($color) {
+    background-image: linear-gradient(to right, transparent 50%, $color 50%);
+  }
+
+  @mixin end-range($color) {
+    background-image: linear-gradient(to left, transparent 50%, $color 50%);
+  }
+
+  @mixin start-end-day {
+    position: absolute;
+    z-index: -1;
+    top: math.div($calendar-day-inner-height - $calendar-start-end-size, 2);
+    left: 0;
+    right: 0;
+
+    margin: auto;
+
+    height: $calendar-start-end-size;
+    width: $calendar-start-end-size;
+
+    color: $calendar-start-end-day-font-color;
+
+    content: "";
+
+    border-radius: 50%;
+    background: $calendar-start-end-day-color;
+
+    box-shadow: rgba(176, 26, 167, 0.4) 0 2px 6px 0;
+  }
+
+  position: relative;
+
+  &__months-container {
+    display: flex;
+  }
+
+  &__months-container > &__month {
+    margin: 0 8px;
+  }
+
+  &__month {
+    flex: 1;
+
+    background-color: color(white);
+  }
+
+  &__month-header {
+    padding: 4px;
+
+    text-align: center;
+    font-weight: 600;
+    text-transform: lowercase;
+  }
+
+  &__month-header.cobalt-text-titleSmall {
+    margin-bottom: 12px;
+  }
+
+  &__month__week {
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    margin: 0;
+  }
+
+  &__month__week ~ &__month__week {
+    justify-content: flex-start;
+  }
+
+  &__month__week-header {
+    display: flex;
+    margin-bottom: 6px;
+  }
+
+  &__month__day-header {
+    flex: 1;
+
+    text-align: center;
+    color: color(grey, dark);
+    font-weight: 400;
+    font-size: 14px;
+  }
+
+  &__day {
+    position: relative;
+
+    z-index: 1;
+
+    padding: $calendar-day-padding 0;
+
+    box-sizing: border-box;
+
+    flex-basis: calc(100% / 7);
+
+    min-width: $calendar-start-end-size;
+
+    text-align: center;
+
+    font-size: 13px;
+
+    line-height: $calendar-day-inner-height;
+
+    cursor: pointer;
+
+    .cobalt-CalendarRangePicker__day-inner {
+      position: relative;
+
+      z-index: 1;
+    }
+
+    &--today {
+      color: color(purple);
+      font-weight: 600;
+    }
+
+    &--selected {
+      .cobalt-CalendarRangePicker__day-inner {
+        background-color: $calendar-range-day-color;
+      }
+    }
+
+    &--disabled {
+      color: color(grey);
+
+      cursor: auto;
+    }
+
+    &--startDay,
+    &--endDay {
+      color: $calendar-start-end-day-font-color;
+
+      font-weight: 600;
+
+      .cobalt-CalendarRangePicker__day-inner {
+        background-color: transparent;
+      }
+    }
+
+    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--range {
+      .cobalt-CalendarRangePicker__day-inner {
+        @include start-range($calendar-range-day-color);
+      }
+    }
+
+    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--range {
+      .cobalt-CalendarRangePicker__day-inner {
+        @include end-range($calendar-range-day-color);
+      }
+    }
+
+    &--startDay .cobalt-CalendarRangePicker__day-inner:after,
+    &--endDay .cobalt-CalendarRangePicker__day-inner:after {
+      @include start-end-day;
+    }
+
+    //Start day = end day
+    &--startDay.cobalt-CalendarRangePicker__day--endDay
+      .cobalt-CalendarRangePicker__day-inner:before {
+      @include start-end-day;
+
+      box-shadow: white 0 0 0 2px, rgb(176, 26, 167) 0 0 0 4px;
+    }
+
+    // start/end day content when the other one is currently edited + today
+    &--startDay.cobalt-CalendarRangePicker__day--today:not(&--endDay).cobalt-CalendarRangePicker__day--subdued,
+    &--endDay.cobalt-CalendarRangePicker__day--today:not(&--startDay).cobalt-CalendarRangePicker__day--subdued {
+      font-weight: 600;
+      color: color(purple);
+    }
+
+    // not today
+    &--startDay:not(&--endDay):not(&--today).cobalt-CalendarRangePicker__day--subdued,
+    &--endDay:not(&--startDay):not(&--today).cobalt-CalendarRangePicker__day--subdued {
+      font-weight: inherit;
+      color: black;
+    }
+
+    // start/end day background (circle) when the other one is currently edited
+    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--subdued
+      .cobalt-CalendarRangePicker__day-inner:after,
+    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--subdued
+      .cobalt-CalendarRangePicker__day-inner:after {
+      background: $calendar-range-day-color;
+      box-shadow: none;
+    }
+
+    &--selected:not(&--startDay).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--firstOfMonth
+      .cobalt-CalendarRangePicker__day-inner:before,
+    &--selected:not(&--endDay).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--lastOfMonth
+      .cobalt-CalendarRangePicker__day-inner:before {
+      position: absolute;
+
+      height: 0;
+      width: 0;
+
+      border-top: 12px solid transparent;
+      border-bottom: 12px solid transparent;
+
+      content: "";
+    }
+
+    &--selected:not(&--startDay).cobalt-CalendarRangePicker__day--firstOfMonth
+      .cobalt-CalendarRangePicker__day-inner:before {
+      left: -10px;
+
+      border-right: crossMonthBorder($calendar-range-day-color);
+    }
+
+    &--selected:not(&--endDay).cobalt-CalendarRangePicker__day--lastOfMonth
+      .cobalt-CalendarRangePicker__day-inner:before {
+      right: -10px;
+
+      border-left: crossMonthBorder($calendar-range-day-color);
+    }
+  }
+
+  &__month--invalid &__day {
+    &--selected {
+      .cobalt-CalendarRangePicker__day-inner {
+        background-color: $calendar-range-day-invalid-color;
+      }
+    }
+
+    &--selected.cobalt-CalendarRangePicker__day--invalid {
+      .cobalt-CalendarRangePicker__day-inner {
+        background-color: $calendar-out-of-range-color;
+      }
+    }
+
+    &--startDay,
+    &--startDay.cobalt-CalendarRangePicker__day--invalid,
+    &--endDay,
+    &--endDay.cobalt-CalendarRangePicker__day--invalid {
+      .cobalt-CalendarRangePicker__day-inner {
+        background-color: transparent;
+      }
+    }
+
+    // invalid start day range
+    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--range {
+      .cobalt-CalendarRangePicker__day-inner {
+        @include start-range($calendar-range-day-invalid-color);
+      }
+    }
+
+    // out of range start day range
+    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
+      .cobalt-CalendarRangePicker__day-inner {
+        @include start-range($calendar-out-of-range-color);
+      }
+    }
+
+    // end day range
+    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--range {
+      .cobalt-CalendarRangePicker__day-inner {
+        @include end-range($calendar-range-day-invalid-color);
+      }
+    }
+
+    // invalid end day range
+    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--range.cobalt-CalendarRangePicker__day--invalid {
+      .cobalt-CalendarRangePicker__day-inner {
+        @include end-range($calendar-out-of-range-color);
+      }
+    }
+
+    // invalid start/end day background (circle)
+    &--startDay .cobalt-CalendarRangePicker__day-inner:after,
+    &--endDay .cobalt-CalendarRangePicker__day-inner:after {
+      box-shadow: rgba($calendar-selected-day-invalid-color, 0.4) 0 2px 6px 0;
+      background: $calendar-selected-day-invalid-color;
+    }
+
+    // invalid start/end day background (circle) when the other one is currently edited
+    &--startDay:not(&--endDay).cobalt-CalendarRangePicker__day--subdued
+      .cobalt-CalendarRangePicker__day-inner:after,
+    &--endDay:not(&--startDay).cobalt-CalendarRangePicker__day--subdued
+      .cobalt-CalendarRangePicker__day-inner:after {
+      background: $calendar-range-day-invalid-color;
+    }
+
+    &--selected:not(&--startDay).cobalt-CalendarRangePicker__day--firstOfMonth
+      .cobalt-CalendarRangePicker__day-inner:before {
+      border-right: crossMonthBorder($calendar-range-day-invalid-color);
+    }
+
+    &--selected:not(&--startDay).cobalt-CalendarRangePicker__day--invalid.cobalt-CalendarRangePicker__day--firstOfMonth
+      .cobalt-CalendarRangePicker__day-inner:before {
+      border-right: crossMonthBorder($calendar-out-of-range-color);
+    }
+
+    &--selected:not(&--endDay).cobalt-CalendarRangePicker__day--lastOfMonth
+      .cobalt-CalendarRangePicker__day-inner:before {
+      border-left: crossMonthBorder($calendar-range-day-invalid-color);
+    }
+
+    &--selected:not(&--endDay).cobalt-CalendarRangePicker__day--invalid.cobalt-CalendarRangePicker__day--lastOfMonth
+      .cobalt-CalendarRangePicker__day-inner:before {
+      border-left: crossMonthBorder($calendar-out-of-range-color);
+    }
+  }
+
+  &__message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    margin: 0;
+
+    height: 0;
+
+    opacity: 0;
+
+    transition: height 350ms, opacity 350ms;
+
+    &--show {
+      height: 40px;
+
+      opacity: 1;
+    }
+
+    .cobalt-Hint {
+      margin: 0;
+    }
+  }
+}

package/styles/components/Calendar/CalendarView/index.scss

@@ -0,0 +1,64 @@
+@use "sass:math";
+
+$daySize: spacing();
+
+.cobalt-CalendarView {
+  display: flex;
+
+  &__month {
+    &:not(:last-child) {
+      margin-right: spacing(tight);
+    }
+  }
+
+  &__monthName {
+    text-transform: uppercase;
+    color: color(graphite, light);
+    font-weight: bold;
+  }
+
+  &__week {
+    display: flex;
+
+    &:not(:last-child) {
+      margin-bottom: 4px;
+    }
+  }
+
+  &__day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $daySize;
+    height: $daySize;
+    flex-shrink: 0;
+
+    color: color(graphite);
+
+    font-size: 12px;
+
+    border-radius: math.div($daySize, 2);
+
+    &--disabled {
+      background-color: color(grey);
+    }
+
+    &--highlighted {
+      color: color(white);
+
+      background-color: color(turquoise);
+    }
+
+    &--semi-highlighted {
+      background-color: lighten(color(turquoise), 30);
+    }
+
+    &--past {
+      color: color(grey);
+    }
+
+    &:not(:first-child) {
+      margin-left: 4px;
+    }
+  }
+}

package/styles/components/Callout/index.scss

@@ -0,0 +1,64 @@
+.cobalt- {
+  &Callout {
+    @include text-style-body;
+
+    position: relative;
+
+    padding: spacing(tight);
+    margin-bottom: spacing();
+
+    background-color: color(white);
+    border-radius: 3px;
+
+    box-shadow: elevation(light);
+  }
+
+  &Callout--info {
+    @include card-strip(aller);
+  }
+
+  &Callout--success {
+    @include card-strip(signal);
+  }
+
+  &Callout--error {
+    @include card-strip(essence);
+  }
+
+  &Callout__Title {
+    @include text-style-title-tiny;
+
+    margin-bottom: spacing(extra-tight);
+  }
+
+  &Callout__Close {
+    position: absolute;
+
+    top: -8px;
+    right: -8px;
+
+    width: 28px;
+    height: 28px;
+    padding: 0;
+
+    border: 0;
+
+    font-size: 20px;
+    line-height: 28px;
+    text-align: center;
+
+    color: color(graphite, light);
+
+    background-color: color(white);
+    border-radius: 50%;
+    box-shadow: elevation(light);
+
+    cursor: pointer;
+
+    transition: color 0.2s;
+
+    &:hover {
+      color: color(graphite);
+    }
+  }
+}