@drivy/cobalt 0.16.0 → 0.17.0

package/styles/components/Rating/index.scss

@@ -0,0 +1,134 @@
+.cobalt-rating,
+.cobalt-rating-input {
+  display: flex;
+
+  align-items: center;
+
+  pointer-events: none;
+
+  gap: 4px;
+}
+
+.cobalt-rating__label {
+  line-height: 14px;
+  font-size: 14px;
+  color: color(graphite, light);
+}
+
+.cobalt-rating-input {
+  &--disabled {
+    opacity: 0.5;
+  }
+
+  &:not(.cobalt-rating-input--disabled) .cobalt-rating-icons {
+    pointer-events: initial;
+  }
+}
+
+.cobalt-rating-icons {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  pointer-events: none;
+
+  * {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  &--icon-size-48 .cobalt-Icon {
+    height: spacing(xl);
+    width: spacing(xl);
+  }
+
+  &__icon-wrapper {
+    position: relative;
+
+    display: inline-block;
+
+    line-height: 0;
+
+    cursor: pointer;
+  }
+
+  &__icon-wrapper input {
+    width: 0;
+    height: 0;
+    margin: 0;
+    padding: 0;
+
+    opacity: 0;
+  }
+
+  &__icon-wrapper * {
+    pointer-events: none;
+  }
+
+  &__icon-half-container {
+    position: absolute;
+
+    top: 0;
+    left: 0;
+
+    width: calc(50%);
+
+    overflow: hidden;
+  }
+
+  &__icon-half-container .cobalt-Icon {
+    max-width: none;
+  }
+
+  &:not(:hover):not(:focus-visible) input:focus {
+    // focus feedback with keyboard navigation only
+    & + .cobalt-Icon {
+      border-radius: spacing(unit);
+      box-shadow: 0 0 0 1px color(turquoise);
+    }
+  }
+
+  /* stylelint-disable order/order */
+  @media (hover: hover) {
+    // desktop animation only
+    &__icon-wrapper--selected {
+      input:checked:focus + .cobalt-Icon {
+        transform: scale(1) !important;
+      }
+    }
+
+    &__icon-wrapper:hover {
+      .cobalt-Icon {
+        transform: scale(1.2);
+      }
+    }
+
+    &:not(:hover)
+      &__icon-wrapper:not(:hover):not(:focus-visible)
+      input:focus:checked {
+      // focus feedback with keyboard navigation only
+      & + .cobalt-Icon {
+        animation: rating-pop--keyboard 0.3s ease 1;
+      }
+    }
+  }
+
+  @media (hover: none) {
+    // mobile selection feedback
+    &__icon-wrapper input:checked {
+      & + .cobalt-Icon {
+        animation: rating-pop--mobile 0.3s ease 1;
+      }
+    }
+  }
+}
+
+@keyframes rating-pop--keyboard {
+  0% {
+    transform: scale(1.2);
+  }
+}
+
+@keyframes rating-pop--mobile {
+  0% {
+    transform: scale(1.5);
+  }
+}

package/styles/components.scss

@@ -6,7 +6,6 @@
 @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";
@@ -20,7 +19,6 @@
 @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";
@@ -28,3 +26,4 @@
 @import "./components/Popover/index";
 @import "./components/Accordion/index";
 @import "./components/HorizontalList/index";
+@import "./components/Rating/index";

package/styles/core/_colors-map.scss

@@ -0,0 +1,225 @@
+/**********************************/
+/* GENERATED WHEN BUILDING COBALT */
+/*** DO NOT MODIFY IT DIRECTLY ****/
+/**********************************/
+$theme-colors-map: (
+  background: (
+    accent: var(--c-l-purple),
+    accentInteractive: (
+      DEFAULT: var(--c-l-purple),
+      hover: var(--c-l-purple)
+    ),
+    accentAlt: var(--c-l-indigo),
+    accentAltInteractive: (
+      DEFAULT: var(--c-l-indigo),
+      hover: var(--c-l-indigo)
+    ),
+    connect: var(--c-l-turquoise),
+    connectInteractive: (
+      DEFAULT: var(--c-l-turquoise),
+      hover: var(--c-l-turquoise)
+    ),
+    driver: var(--c-l-deprecatedDriver),
+    error: var(--c-l-red),
+    errorInteractive: (
+      DEFAULT: var(--c-l-red),
+      hover: var(--c-l-red)
+    ),
+    errorAlt: var(--c-l-graphite),
+    info: var(--c-l-grey-lighter),
+    neutral: var(--c-l-grey-light),
+    neutralAlt: var(--c-l-grey-lighter),
+    owner: var(--c-l-indigo-dark),
+    primary: var(--c-l-grey-lighter),
+    secondary: var(--c-l-white),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-grey-lighter)
+    ),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-graphite)
+  ),
+  buttonBackground: (
+    accentAlt: var(--c-l-indigo),
+    destructiveInteractive: (
+      DEFAULT: var(--c-l-red),
+      hover: var(--c-l-red),
+      press: var(--c-l-red)
+    ),
+    disabled: var(--c-l-grey-lighter),
+    primaryInteractive: (
+      DEFAULT: var(--c-l-purple),
+      hover: var(--c-l-indigo),
+      press: var(--c-l-indigo-dark)
+    ),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    success: var(--c-l-green),
+    successAltInteractive: (
+      DEFAULT: var(--c-l-green),
+      hover: var(--c-l-green),
+      press: var(--c-l-green)
+    ),
+    tertiaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    )
+  ),
+  buttonIcon: (
+    accentAlt: var(--c-l-purple),
+    destructiveInteractive: (
+      DEFAULT: var(--c-l-red),
+      hover: var(--c-l-red),
+      press: var(--c-l-red)
+    ),
+    disabled: var(--c-l-graphite-light),
+    primaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-indigo),
+      hover: var(--c-l-indigo),
+      press: var(--c-l-indigo-dark)
+    ),
+    success: var(--c-l-white),
+    successAltInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    tertiaryInteractive: (
+      DEFAULT: var(--c-l-blue),
+      hover: var(--c-l-blue),
+      press: var(--c-l-blue)
+    )
+  ),
+  buttonLabel: (
+    accentAlt: var(--c-l-purple),
+    destructiveInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    disabled: var(--c-l-graphite-light),
+    primaryInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    secondaryInteractive: (
+      DEFAULT: var(--c-l-indigo),
+      hover: var(--c-l-indigo),
+      press: var(--c-l-indigo-dark)
+    ),
+    success: var(--c-l-white),
+    successAltInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-white),
+      press: var(--c-l-white)
+    ),
+    tertiaryInteractive: (
+      DEFAULT: var(--c-l-blue),
+      hover: var(--c-l-blue),
+      press: var(--c-l-blue)
+    )
+  ),
+  fill: (
+    accent: var(--c-l-purple),
+    accentAlt: var(--c-l-purple),
+    disabled: var(--c-l-grey-dark),
+    secondary: var(--c-l-turquoise),
+    subdued: var(--c-l-grey-light)
+  ),
+  icon: (
+    accent: var(--c-l-purple),
+    accentInteractive: (
+      DEFAULT: var(--c-l-purple),
+      hover: var(--c-l-indigo)
+    ),
+    accentAlt: var(--c-l-white),
+    accentAltInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-indigo)
+    ),
+    base: var(--c-l-graphite),
+    baseInteractive: (
+      DEFAULT: var(--c-l-graphite),
+      hover: var(--c-l-graphite)
+    ),
+    connect: var(--c-l-turquoise),
+    driver: var(--c-l-graphite),
+    error: var(--c-l-red),
+    errorAlt: var(--c-l-red),
+    info: var(--c-l-graphite-light),
+    infoAlt: var(--c-l-turquoise),
+    inversed: var(--c-l-white),
+    owner: var(--c-l-white),
+    subdued: var(--c-l-graphite-light),
+    subduedInteractive: (
+      DEFAULT: var(--c-l-graphite-light),
+      hover: var(--c-l-graphite)
+    ),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-white),
+    warning: var(--c-l-coral)
+  ),
+  stroke: (
+    accent: var(--c-l-indigo),
+    accentInteractive: (
+      DEFAULT: var(--c-l-indigo),
+      hover: var(--c-l-indigo),
+      press: var(--c-l-indigo-dark)
+    ),
+    accentAlt: var(--c-l-indigo),
+    base: var(--c-l-grey),
+    baseInteractive: (
+      DEFAULT: var(--c-l-grey),
+      hover: var(--c-l-graphite-light),
+      press: var(--c-l-graphite)
+    ),
+    error: var(--c-l-red),
+    errorAlt: var(--c-l-red),
+    subdued: var(--c-l-grey-light),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-green)
+  ),
+  text: (
+    accent: var(--c-l-purple),
+    accentInteractive: (
+      DEFAULT: var(--c-l-blue),
+      hover: var(--c-l-blue)
+    ),
+    accentAlt: var(--c-l-white),
+    accentAltInteractive: (
+      DEFAULT: var(--c-l-white),
+      hover: var(--c-l-indigo)
+    ),
+    base: var(--c-l-graphite),
+    baseInteractive: (
+      DEFAULT: var(--c-l-graphite),
+      hover: var(--c-l-graphite)
+    ),
+    connect: var(--c-l-turquoise),
+    driver: var(--c-l-graphite),
+    error: var(--c-l-red),
+    errorAlt: var(--c-l-white),
+    info: var(--c-l-graphite-light),
+    infoAlt: var(--c-l-turquoise),
+    inversed: var(--c-l-white),
+    owner: var(--c-l-white),
+    subdued: var(--c-l-graphite-light),
+    subduedInteractive: (
+      DEFAULT: var(--c-l-graphite-light),
+      hover: var(--c-l-graphite)
+    ),
+    success: var(--c-l-green),
+    successAlt: var(--c-l-white),
+    warning: var(--c-l-coral)
+  )
+);

package/styles/core/border.scss

@@ -1,3 +1,5 @@
+@import "./color";
+
 $border-size-data: (
   0: 0,
   0.5: 0.5px,
@@ -11,6 +13,77 @@ $border-style-data: (
   dashed: dashed
 );
 
+@mixin border-style($style: solid, $position) {
+  $styleValue: map-get($border-style-data, $style);
+  @if type-of($styleValue) != string {
+    @error "Border style `#{$style}` not found.";
+  }
+  @if $position ==
+    top or
+    $position ==
+    bottom or
+    $position ==
+    left or
+    $position ==
+    right
+  {
+    border-#{$position}-style: $styleValue;
+  } @else {
+    border-style: $styleValue;
+  }
+}
+
+@mixin border-width($size: default, $position) {
+  $sizeValue: map-get($border-size-data, $size);
+  @if type-of($sizeValue) != number {
+    @error "Border size `#{$size}` not found.";
+  }
+  @if $position ==
+    top or
+    $position ==
+    bottom or
+    $position ==
+    left or
+    $position ==
+    right
+  {
+    border-#{$position}-width: $sizeValue;
+  } @else {
+    border-width: $sizeValue;
+  }
+}
+
+@mixin border($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style);
+  @include border-width($size);
+}
+
+@mixin border-top($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style, top);
+  @include border-width($size, top);
+}
+
+@mixin border-bottom($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style, bottom);
+  @include border-width($size, bottom);
+}
+
+@mixin border-left($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style, left);
+  @include border-width($size, left);
+}
+
+@mixin border-right($color, $size: default, $style: solid) {
+  @include border-color($color);
+  @include border-style($style, right);
+  @include border-width($size, right);
+}
+
+// LEGACY
 @function border($color, $size: default, $style: solid) {
   $sizeValue: map-get($border-size-data, $size);
   $styleValue: map-get($border-style-data, $style);

package/styles/core/color.scss

@@ -1,3 +1,46 @@
+@import "./_colors-map";
+
+@mixin semantic-color($color, $category, $property) {
+  $semantic-colors-data: map-get($theme-colors-map, $category);
+  $semantic-color: map-get($semantic-colors-data, $color);
+  @if not $semantic-color {
+    @error "Didn't found any match for: #{$color}, #{$category}, #{$property}";
+  }
+  @if type-of($semantic-color) == string {
+    #{$property}: $semantic-color;
+  } @else {
+    #{$property}: map-get($semantic-color, DEFAULT);
+    @if map-has-key($semantic-color, hover) {
+      &:hover,
+      &:focus {
+        #{$property}: map-get($semantic-color, hover);
+      }
+    }
+    @if map-has-key($semantic-color, press) {
+      &:active {
+        #{$property}: map-get($semantic-color, press);
+      }
+    }
+  }
+}
+
+@mixin bg-color($color) {
+  @include semantic-color($color, background, background-color);
+}
+
+@mixin fill-color($color) {
+  @include semantic-color($color, fill, fill);
+}
+
+@mixin border-color($color) {
+  @include semantic-color($color, stroke, border-color);
+}
+
+@mixin text-color($color) {
+  @include semantic-color($color, text, color);
+}
+
+// LEGACY
 $color-data: (
   white: #fff,
   grey: (

package/styles/core/palette.scss

@@ -0,0 +1,80 @@
+/**********************************/
+/* GENERATED WHEN BUILDING COBALT */
+/*** DO NOT MODIFY IT DIRECTLY ****/
+/**********************************/
+:root {
+  --c-black-50: #544f53;
+  --c-black-100: #363036;
+  --c-black-300: #282127;
+  --c-black-500: #191218;
+  --c-grey-100: #e3e2e3;
+  --c-grey-300: #a9a6a9;
+  --c-green-100: #cdebcb;
+  --c-green-120: #bfe5bd;
+  --c-green-150: #b1e0ae;
+  --c-green-500: #5cbf54;
+  --c-green-700: #479d3e;
+  --c-green-900: #2f6d1c;
+  --c-green-1000: #15310d;
+  --c-navy-50: #f1f1f4;
+  --c-navy-100: #e3e2e8;
+  --c-navy-300: #7b728e;
+  --c-navy-500: #362e53;
+  --c-navy-700: #261a48;
+  --c-navy-900: #0f0429;
+  --c-orange-100: #f1d5b1;
+  --c-orange-300: #eec186;
+  --c-orange-500: #e39735;
+  --c-orange-900: #462e0c;
+  --c-purpleDeep-100: #f2a6ee;
+  --c-purpleDeep-300: #ea71e3;
+  --c-purpleDeep-400: #c31dba;
+  --c-purpleDeep-500: #9b1794;
+  --c-purpleDeep-700: #73116e;
+  --c-purpleDeep-900: #4b0b48;
+  --c-purpleLight-100: #ffdcfd;
+  --c-purple-100: #f6e5f5;
+  --c-purple-300: #ca6bc3;
+  --c-purple-400: #c04fb8;
+  --c-purple-500: #b01aa7;
+  --c-purple-700: #8d1586;
+  --c-purple-900: #5f1159;
+  --c-red-100: #fdeded;
+  --c-red-120: #fbdada;
+  --c-red-150: #f9c8c8;
+  --c-red-300: #e38c8c;
+  --c-red-400: #ed4545;
+  --c-red-500: #c71414;
+  --c-red-700: #af1212;
+  --c-red-900: #3f2424;
+  --c-turquoise-500: #5ecbdd;
+  --c-turquoise-700: #53b3c2;
+  --c-white: #fff;
+  --c-yellow-100: #ffeed1;
+  --c-yellow-300: #ffdda3;
+  --c-yellow-500: #ffc766;
+  --c-yellow-700: #c59548;
+  --c-yellow-900: #75592d;
+  --c-yellow-1000: #3b2e17;
+  --c-l-white: #fff;
+  --c-l-grey-lighter: #f8f7f8;
+  --c-l-grey-light: #edebed;
+  --c-l-grey: #dbd8dc;
+  --c-l-grey-dark: #a49da7;
+  --c-l-indigo: #61366b;
+  --c-l-indigo-dark: #390446;
+  --c-l-purple-light: #d076ca;
+  --c-l-purple: #b01aa7;
+  --c-l-graphite-light: #757575;
+  --c-l-graphite: #333;
+  --c-l-turquoise: #5ecbdd;
+  --c-l-coral: #ffa484;
+  --c-l-amber: #ffc25a;
+  --c-l-red: #ff7378;
+  --c-l-green-light: #0fffb3;
+  --c-l-green: #00da94;
+  --c-l-green-dark: #00a873;
+  --c-l-blue: #2ea2ea;
+  --c-l-deprecatedBlueGhost: #2ea2ea0f;
+  --c-l-deprecatedDriver: #ffd988;
+}