@drivy/cobalt 0.13.0

package/styles/components.scss

@@ -0,0 +1,29 @@
+@import "./components/Alerter/index";
+@import "./components/BasicCell/index";
+@import "./components/BulletList/index";
+@import "./components/Button/index";
+@import "./components/Calendar/CalendarRangePicker/index";
+@import "./components/Callout/index";
+@import "./components/Card/index";
+@import "./components/Cell/index";
+@import "./components/CdwChoice/index";
+@import "./components/EmptyState/index";
+@import "./components/Helper/index";
+@import "./components/Modal/index";
+@import "./components/Flag/index";
+@import "./components/Flash/index";
+@import "./components/Icon/index";
+@import "./components/Note/index";
+@import "./components/Pill/index";
+@import "./components/PriceTable/index";
+@import "./components/ProgressBar/index";
+@import "./components/TabBar/index";
+@import "./components/Tag/index";
+@import "./components/TextContainer/index";
+@import "./components/Chip/index";
+@import "./components/Form/index";
+@import "./components/Calendar/CalendarView/index";
+@import "./components/Tabs/index";
+@import "./components/Popover/index";
+@import "./components/Accordion/index";
+@import "./components/HorizontalList/index";

package/styles/core/animation.scss

@@ -0,0 +1,9 @@
+@keyframes cobalt-animation__full-rotation {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/styles/core/border-radius.scss

@@ -0,0 +1,20 @@
+$border-radius-data: (
+  large: .375rem,
+  x-large: .5rem,
+  none: 0,
+  base: .25rem,
+  md: .375rem,
+  lg: .5rem,
+  xl: .75rem,
+  full: 9999px
+);
+
+@function border-radius($size: base) {
+  $value: map-get($border-radius-data, $size);
+
+  @if type-of($value) != number {
+    @error "Border radius size `#{$size}` not found.";
+  }
+
+  @return $value;
+}

package/styles/core/border.scss

@@ -0,0 +1,26 @@
+$border-size-data: (
+  0: 0,
+  0.5: 0.5px,
+  default: 1px,
+  2: 0.125rem,
+  4: .25rem
+);
+
+$border-style-data: (
+  solid: solid,
+  dashed: dashed
+);
+
+@function border($color, $size: default, $style: solid) {
+  $sizeValue: map-get($border-size-data, $size);
+  $styleValue: map-get($border-style-data, $style);
+
+  @if type-of($sizeValue) != number {
+    @error "Border size `#{$size}` not found.";
+  }
+  @if type-of($styleValue) != string {
+    @error "Border style `#{$size}` not found.";
+  }
+
+  @return #{$sizeValue $styleValue color($color)};
+}

package/styles/core/breakpoints.scss

@@ -0,0 +1,49 @@
+// breakpoints are originally comfing from Twitter Bootstrap
+$breakpoint-data: (
+  xs: 480px,
+  sm: 768px,
+  md: 992px,
+  lg: 1200px
+);
+
+@function breakpoint-width($name) {
+  $value: map-get($breakpoint-data, $name);
+
+  @if type-of($value) != number {
+    @error "Breakpoint `#{$name}` not found.";
+  }
+
+  @return $value;
+}
+
+// highly inspired by sass-mq
+@mixin breakpoint($from: false, $until: false) {
+  $min-width: 0;
+  $max-width: 0;
+  $media-query: "";
+
+  // From: this breakpoint (inclusive)
+  @if $from {
+    $min-width: breakpoint-width($from);
+  }
+
+  // Until: that breakpoint (exclusive)
+  @if $until {
+    $max-width: breakpoint-width($until) - 1px;
+  }
+
+  @if $min-width != 0 {
+    $media-query: "#{$media-query} and (min-width: #{$min-width})";
+  }
+
+  @if $max-width != 0 {
+    $media-query: "#{$media-query} and (max-width: #{$max-width})";
+  }
+
+  // Remove leading " and"
+  $media-query: str-slice(unquote($media-query), 6);
+
+  @media #{$media-query} {
+    @content;
+  }
+}

package/styles/core/card.scss

@@ -0,0 +1,30 @@
+$card-strip-width: 3px;
+
+@mixin card-strip($variant: gradient) {
+  position: relative;
+
+  &:before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+
+    display: block;
+    width: $card-strip-width;
+
+    border-top-left-radius: inherit;
+    border-bottom-left-radius: inherit;
+
+    content: "";
+
+    @if $variant == aller {
+      background-color: color(aller);
+    } @else if $variant == signal {
+      background-color: color(signal);
+    } @else if $variant == essence {
+      background-color: color(essence);
+    } @else {
+      @error "Card strip variant `#{$variant}` not found.";
+    }
+  }
+}

package/styles/core/color.scss

@@ -0,0 +1,78 @@
+$color-data: (
+  white: #fff,
+  grey: (
+    lighter: #f8f7f8,
+    light: #edebed,
+    base: #dbd8dc,
+    dark: #a49da7
+  ),
+  indigo: (
+    base: #61366b,
+    dark: #390446
+  ),
+  purple: (
+    light: #d076ca,
+    base: #b01aa7
+  ),
+  graphite: (
+    light: #757575,
+    base: #333
+  ),
+  turquoise: #5ecbdd,
+  coral: #ffa484,
+  amber: #ffc25a,
+  red: #ff7378,
+  green: (
+    light: #0fffb3,
+    base: #00da94,
+    dark: #00a873
+  ),
+  blue: #2ea2ea,
+  transparent: transparent,
+  current: currentColor
+);
+
+$color-data-drivy-map: (
+  white: map-get($color-data, white),
+  graphite: (
+    lighter: map-get(map-get($color-data, graphite), light),
+    light: map-get(map-get($color-data, graphite), light),
+    base: map-get(map-get($color-data, graphite), base)
+  ),
+  asphalt: (
+    lighter: map-get(map-get($color-data, purple), light),
+    light: map-get(map-get($color-data, purple), base),
+    base: map-get(map-get($color-data, indigo), dark)
+  ),
+  acier: map-get($color-data, grey),
+  aller: map-get($color-data, turquoise),
+  essence: (
+    base: map-get($color-data, red),
+    light: #ffedee
+  ),
+  signal: map-get($color-data, green),
+  electrique: #d8ff00,
+  blue: map-get($color-data, blue)
+);
+
+@function color($name, $variant: base) {
+  $variants: map-get(map-merge($color-data, $color-data-drivy-map), $name);
+
+  @if not $variants {
+    @error "Color `#{$name}` not found.";
+  }
+
+  @if type-of($variants) == color {
+    $variants: (
+      base: $variants
+    );
+  }
+
+  $value: map-get($variants, $variant);
+
+  @if not $value {
+    @error "Variant `#{$variant}` not found for color `#{$name}`.";
+  }
+
+  @return $value;
+}

package/styles/core/cursor.scss

@@ -0,0 +1,19 @@
+$cursor-data: (
+  auto: auto,
+  default: default,
+  pointer: pointer,
+  wait: wait,
+  text: text,
+  move: move,
+  not-allowed: not-allowed
+);
+
+@function cursor($cursor) {
+  $value: map-get($cursor-data, $cursor);
+
+  @if type-of($value) != string {
+    @error "Border radius size `#{$cursor}` not found.";
+  }
+
+  @return $value;
+}

package/styles/core/elevation.scss

@@ -0,0 +1,18 @@
+$elevation-data: (
+  light: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.1),
+  medium: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.15),
+  strong: 0 0.375rem 2.25rem rgba(0, 0, 0, 0.2),
+  base: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.1),
+  md: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.15),
+  lg: 0 0.375rem 2.25rem rgba(0, 0, 0, 0.2)
+);
+
+@function elevation($variant: base) {
+  $fetched-value: map-get($elevation-data, $variant);
+
+  @if $fetched-value == null {
+    @error "Elevation variant `#{$variant}` not found.";
+  }
+
+  @return $fetched-value;
+}

package/styles/core/global-variables.scss

@@ -0,0 +1,2 @@
+$card-padding: spacing();
+$unit: 4px;

package/styles/core/spacing.scss

@@ -0,0 +1,38 @@
+$spacing-data: (
+  none: 0,
+  unit: .25rem,
+  extra-tight: .5rem,
+  tight: 1rem,
+  base: 1.5rem,
+  medium: 2rem,
+  loose: 3rem,
+  extra-loose: 4rem
+);
+
+$new-spacing-data: (
+  none: 0,
+  unit: .25rem,
+  extra-tight: .5rem,
+  tight: 1rem,
+  base: 1.5rem,
+  medium: 2rem,
+  loose: 3rem,
+  extra-loose: 4rem,
+  "2xs": .25rem,
+  xs: .5rem,
+  sm: 1rem,
+  md: 1.5rem,
+  lg: 2rem,
+  xl: 3rem,
+  "2xl": 4rem
+);
+
+@function spacing($variant: base) {
+  $value: remToPx(map-get($new-spacing-data, $variant));
+
+  @if $value == null {
+    @error "Spacing variant `#{$variant}` not found.";
+  }
+
+  @return $value;
+}

package/styles/core/text.scss

@@ -0,0 +1,84 @@
+@mixin c-text-heading {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 2.25rem;
+  font-weight: 700;
+  line-height: 2.5rem;
+
+  @include breakpoint($from: sm) {
+    font-size: 3.5rem;
+    line-height: 3.75rem;
+  }
+}
+
+@mixin c-text-subheading {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+
+  @include breakpoint($from: sm) {
+    font-size: 1.75rem;
+    line-height: 2rem;
+  }
+}
+
+@mixin c-text-section-heading {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.5rem;
+  color: #757575;
+}
+
+@mixin c-text-title-xl {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 2rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+}
+
+@mixin c-text-title-lg {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.75rem;
+}
+
+@mixin c-text-title-md {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.25rem;
+}
+
+@mixin c-text-title-sm {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+@mixin c-text-title-xs {
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+}
+
+@mixin c-text-body-lg {
+  font-family: BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+
+@mixin c-text-body-md {
+  font-family: BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.5rem;
+}
+
+@mixin c-text-body-sm {
+  font-family: BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}

package/styles/core/typography.scss

@@ -0,0 +1,246 @@
+$font-family-data: (
+  base: unquote("BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif"),
+  brand: unquote("BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif"),
+  monospace: unquote("Consolas,'Liberation Mono',Menlo,Courier,monospace")
+);
+
+$text-variants-data: (
+  title-extralarge: (
+    remToPx(2rem)
+      remToPx(2.25rem)
+  ),
+  title-large: (
+    remToPx(1.5rem)
+      remToPx(1.75rem)
+  ),
+  title: (
+    remToPx(1.125rem)
+      remToPx(1.25rem)
+  ),
+  title-small: (
+    remToPx(0.9375rem)
+      remToPx(1.25rem)
+  ),
+  title-tiny: (
+    remToPx(0.9375rem)
+      remToPx(1.25rem)
+  ),
+  body-large: (
+    remToPx(1.125rem)
+      remToPx(1.5rem)
+  ),
+  body: (
+    remToPx(0.9375rem)
+      remToPx(1.5rem)
+  ),
+  body-small: (
+    remToPx(0.75rem)
+      remToPx(1rem)
+  ),
+  caption: (
+    14px 20px
+  ),
+  section-header: (
+    14px 24px
+  )
+);
+
+@function font-family($name: base) {
+  $fetched-value: map-get($font-family-data, $name);
+
+  @if $fetched-value == null {
+    @error "Font family `#{$name}` not found.";
+  }
+
+  @return $fetched-value;
+}
+
+@function font-styles($name) {
+  $fetched-styles: map-get($text-variants-data, $name);
+
+  @if $fetched-styles == null {
+    @error "Font style variant `#{$name}` not found.";
+  }
+
+  @return $fetched-styles;
+}
+
+@function font-size($name) {
+  @return nth(font-styles($name), 1);
+}
+
+@function line-height($name) {
+  @return nth(font-styles($name), 2);
+}
+
+@mixin text-style-hero-heading {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: remToPx(2.25rem);
+  font-weight: 700;
+  line-height: remToPx(2.5rem);
+  color: color(white);
+
+  text-shadow: 0 3px 20px rgba(#000, 0.3);
+
+  @include breakpoint($from: sm) {
+    font-size: remToPx(3.5rem);
+    line-height: remToPx(3.75rem);
+  }
+}
+
+@mixin text-style-hero-subheading {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: remToPx(1.25rem);
+  font-weight: 700;
+  line-height: remToPx(1.5rem);
+  color: color(white);
+
+  text-shadow: 0 3px 20px rgba(#000, 0.3);
+
+  @include breakpoint($from: sm) {
+    font-size: remToPx(1.75rem);
+    line-height: remToPx(2rem);
+  }
+}
+
+@mixin text-style-title-extralarge {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: font-size(title-extralarge);
+  font-weight: 700;
+  line-height: line-height(title-extralarge);
+  color: color(asphalt);
+
+  @include breakpoint($from: sm) {
+    font-size: remToPx(2.5rem);
+    line-height: remToPx(2.75rem);
+  }
+}
+
+@mixin text-style-title-large {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: font-size(title-large);
+  font-weight: 700;
+  line-height: line-height(title-large);
+  color: color(asphalt);
+
+  @include breakpoint($from: sm) {
+    font-size: remToPx(2rem);
+    line-height: remToPx(2.25rem);
+  }
+}
+
+@mixin text-style-title {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: font-size(title);
+  font-weight: 700;
+  line-height: line-height(title);
+  color: color(asphalt);
+
+  @include breakpoint($from: sm) {
+    font-size: remToPx(1.5rem);
+    line-height: remToPx(1.75rem);
+  }
+}
+
+@mixin text-style-title-small {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: font-size(title-small);
+  font-weight: 600;
+  line-height: line-height(title-small);
+  color: color(asphalt);
+
+  @include breakpoint($from: sm) {
+    font-size: remToPx(1.125rem);
+    line-height: remToPx(1.5rem);
+  }
+}
+
+@mixin text-style-title-tiny {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-family: BrownPro,BlinkMacSystemFont,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-size: font-size(title-tiny);
+  font-weight: 600;
+  line-height: line-height(title-tiny);
+  color: color(asphalt);
+}
+
+@mixin text-style--titleSubdued {
+  color: color(asphalt, light);
+}
+
+@mixin text-style-body-large {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-size: font-size(body-large);
+  line-height: line-height(body-large);
+}
+
+@mixin text-style-body {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-size: font-size(body);
+  line-height: line-height(body);
+  color: color(graphite);
+}
+
+@mixin text-style-body-small {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-size: font-size(body-small);
+  line-height: line-height(body-small);
+}
+
+@mixin text-style--bodySubdued {
+  color: color(graphite, light);
+}
+
+@mixin text-style--bodyInversed {
+  color: color(white);
+}
+
+@mixin text-style-caption {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-size: font-size(caption);
+  line-height: line-height(caption);
+
+  color: rgba(color(graphite), 0.5);
+}
+
+@mixin text-style-section-header {
+  // reset is necessary as we still apply default style to html tags such as hX
+  margin-bottom: 0;
+
+  font-family: font-family(brand);
+  font-weight: 700;
+  font-size: font-size(section-header);
+  line-height: line-height(section-header);
+
+  color: color(graphite, light);
+
+  text-transform: uppercase;
+}