@drivy/cobalt 0.19.0 → 0.20.0

package/styles/components/Form/CheckablePill.scss

@@ -38,7 +38,7 @@
     height: $height;
     box-sizing: border-box;
     padding: 0 spacing(base);
-    border: $border-width solid color(acier);
+    border: $border-width solid color(grey);
 
     line-height: $height - $border-width * 2;
     color: $main-color-light;
@@ -72,16 +72,16 @@
   &__Input:focus + #{ $self }__Label:after {
     position: absolute;
 
-    box-shadow: 0 0 0 1px color(aller);
+    box-shadow: 0 0 0 1px color(turquoise);
     content: "";
   }
 
   &__Input:disabled + #{ $self }__Label {
-    border: $border-width solid color(acier);
+    border: $border-width solid color(grey);
 
     cursor: default;
     box-shadow: none;
-    background-color: color(acier, light);
+    background-color: color(grey, light);
     opacity: 0.8;
 
     transform: none;
@@ -111,7 +111,7 @@
 
   &--error {
     #{ $self }__Input + #{ $self }__Label {
-      border-color: color(essence);
+      border-color: color(red);
 
       color: $main-color-light;
 
@@ -123,7 +123,7 @@
 
       color: color(white);
 
-      background-color: color(essence);
+      background-color: color(red);
 
       .cobalt-Icon {
         fill: color(white);

package/styles/components/Form/Checkmark.scss

@@ -4,7 +4,7 @@
   &CheckmarkField {
     $self: &;
 
-    $disabled-color: color(acier, dark);
+    $disabled-color: color(grey, dark);
     $error-color: $form-element--error-color;
 
     $radio-checkmark-size: 20px;

package/styles/components/Form/Fieldset.scss

@@ -3,7 +3,7 @@
     $border-width: 1px;
 
     padding: (spacing(tight) -$border-width) 0 0 0;
-    border-top: $border-width solid color(acier, light);
+    border-top: $border-width solid color(grey, light);
 
     & > legend {
       @include text-style-title-small;

package/styles/components/Form/Select.scss

@@ -26,7 +26,7 @@
 
       // select placeholder
       &:invalid {
-        color: color(acier, dark) !important;
+        color: color(grey, dark) !important;
       }
 
       &[disabled] {

package/styles/components/Form/Stepper.scss

@@ -66,7 +66,7 @@
 
     &--disabled {
       .cobalt-Stepper__ContentWrapper {
-        color: color(acier);
+        color: color(grey);
       }
     }
 

package/styles/components/Form/TextArea.scss

@@ -20,7 +20,7 @@
       resize: vertical;
 
       &::placeholder {
-        color: color(acier, dark);
+        color: color(grey, dark);
       }
     }
 
@@ -41,7 +41,7 @@
       line-height: 24px;
       text-align: right;
 
-      color: color(acier, dark);
+      color: color(grey, dark);
 
       animation-name: cobalt-TextAreaField--fade-in;
       animation-duration: 150ms;

package/styles/components/Form/TextInput.scss

@@ -17,7 +17,7 @@
       height: 100%;
       display: flex;
 
-      fill: color(acier, dark);
+      fill: color(grey, dark);
 
       .cobalt-Icon {
         transition: fill 150ms ease-in-out;
@@ -28,7 +28,7 @@
       @include form-input-base($self);
 
       &::placeholder {
-        color: color(acier, dark);
+        color: color(grey, dark);
       }
     }
 
@@ -43,7 +43,7 @@
       }
 
       #{ $self }__Input:placeholder-shown + #{ $self }__Icon {
-        fill: color(acier, dark);
+        fill: color(grey, dark);
       }
 
       #{ $self }__Input:focus + #{ $self }__Icon,
@@ -52,7 +52,7 @@
       }
 
       #{ $self }__Input:disabled + #{ $self }__Icon {
-        fill: color(acier, dark);
+        fill: color(grey, dark);
       }
     }
   }

package/styles/components/Form/ToggleSwitch.scss

@@ -126,7 +126,7 @@ $toggle-switch-size-large: 28px;
     &__ToggleSwitchSlider {
       display: inline-block;
 
-      background-color: color(acier);
+      background-color: color(grey);
 
       transition: $animation-duration;
     }
@@ -150,7 +150,7 @@ $toggle-switch-size-large: 28px;
 
       opacity: 0;
 
-      box-shadow: 0 0 0 1px color(aller);
+      box-shadow: 0 0 0 1px color(turquoise);
 
       content: "";
     }
@@ -185,7 +185,7 @@ $toggle-switch-size-large: 28px;
       &[disabled]
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        background-color: color(acier, light);
+        background-color: color(grey, light);
       }
 
       &[disabled]
@@ -198,11 +198,11 @@ $toggle-switch-size-large: 28px;
       &[disabled]:checked
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        background-color: color(acier, dark);
+        background-color: color(grey, dark);
       }
 
       &[disabled] ~ .cobalt-ToggleSwitchField__Label {
-        color: color(acier, dark);
+        color: color(grey, dark);
       }
 
       &:focus
@@ -216,19 +216,19 @@ $toggle-switch-size-large: 28px;
       .cobalt-ToggleSwitchField__Input
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        box-shadow: inset 0 0 0 2px color(essence);
+        box-shadow: inset 0 0 0 2px color(red);
       }
 
       .cobalt-ToggleSwitchField__Input:focus
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        box-shadow: inset 0 0 0 2px color(essence);
+        box-shadow: inset 0 0 0 2px color(red);
       }
 
       .cobalt-ToggleSwitchField__Input:checked
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        background-color: color(essence);
+        background-color: color(red);
       }
     }
 

package/styles/components/Form/form.scss

@@ -1,7 +1,7 @@
-$form-element--default-color: color(acier, dark);
+$form-element--default-color: color(grey, dark);
 $form-element--default-active-color: color(indigo);
-$form-element--success-color: color(signal);
-$form-element--error-color: color(essence);
+$form-element--success-color: color(green);
+$form-element--error-color: color(red);
 
 @mixin form-input-base($container) {
   @include withContext(#{$container}--success) {
@@ -90,7 +90,7 @@ $form-element--error-color: color(essence);
 
     color: color(graphite, light);
 
-    background-color: color(acier, light);
+    background-color: color(grey, light);
   }
 
   &:disabled {

package/styles/components/Icon/index.scss

@@ -23,31 +23,6 @@
     }
   }
 
-  &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;

package/styles/components/Pill/index.scss

@@ -25,7 +25,7 @@ $group-item-spacing: spacing(xs);
     border-radius: $pill-height;
   }
 
-  &Pill--colorAller {
+  &Pill--colorConnect {
     @include text-color(connect);
   }
 

package/styles/components/TabBar/index.scss

@@ -48,7 +48,7 @@
     height: 1px;
 
     content: "";
-    background-color: color(acier);
+    background-color: color(grey);
   }
 
   &TabScroller__ScrollArea {
@@ -127,11 +127,11 @@
     &:focus {
       text-decoration: inherit;
 
-      background: color(acier, lighter);
+      background: color(grey, lighter);
     }
 
     &[aria-selected="true"] {
-      color: color(asphalt);
+      color: color(indigo, dark);
 
       &:after {
         background: color(purple);

package/styles/components/Tag/index.scss

@@ -20,6 +20,6 @@
   &Tag--important {
     @include text-color(error);
 
-    background-color: lighten(color(essence), 24);
+    background-color: lighten(color(red), 24);
   }
 }

package/styles/core/card.scss

@@ -17,12 +17,12 @@ $card-strip-width: 3px;
 
     content: "";
 
-    @if $variant == aller {
-      background-color: color(aller);
-    } @else if $variant == signal {
-      background-color: color(signal);
-    } @else if $variant == essence {
-      background-color: color(essence);
+    @if $variant == turquoise {
+      background-color: color(turquoise);
+    } @else if $variant == green {
+      background-color: color(green);
+    } @else if $variant == red {
+      background-color: color(red);
     } @else {
       @error "Card strip variant `#{$variant}` not found.";
     }

package/styles/core/color.scss

@@ -75,31 +75,8 @@ $color-data: (
   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);
+  $variants: map-get($color-data, $name);
 
   @if not $variants {
     @error "Color `#{$name}` not found.";

package/styles/core/typography.scss

@@ -117,7 +117,7 @@ $text-variants-data: (
   font-size: font-size(title-extralarge);
   font-weight: 700;
   line-height: line-height(title-extralarge);
-  color: color(asphalt);
+  color: color(indigo, dark);
 
   @include breakpoint($from: sm) {
     font-size: remToPx(2.5rem);
@@ -133,7 +133,7 @@ $text-variants-data: (
   font-size: font-size(title-large);
   font-weight: 700;
   line-height: line-height(title-large);
-  color: color(asphalt);
+  color: color(indigo, dark);
 
   @include breakpoint($from: sm) {
     font-size: remToPx(2rem);
@@ -149,7 +149,7 @@ $text-variants-data: (
   font-size: font-size(title);
   font-weight: 700;
   line-height: line-height(title);
-  color: color(asphalt);
+  color: color(indigo, dark);
 
   @include breakpoint($from: sm) {
     font-size: remToPx(1.5rem);
@@ -165,7 +165,7 @@ $text-variants-data: (
   font-size: font-size(title-small);
   font-weight: 600;
   line-height: line-height(title-small);
-  color: color(asphalt);
+  color: color(indigo, dark);
 
   @include breakpoint($from: sm) {
     font-size: remToPx(1.125rem);
@@ -181,11 +181,11 @@ $text-variants-data: (
   font-size: font-size(title-tiny);
   font-weight: 600;
   line-height: line-height(title-tiny);
-  color: color(asphalt);
+  color: color(indigo, dark);
 }
 
 @mixin text-style--titleSubdued {
-  color: color(asphalt, light);
+  color: color(purple);
 }
 
 @mixin text-style-body-large {

package/tokens/icons.js

@@ -98,6 +98,8 @@ const icons = {
 	edit: "edit.svg",
 	electric: "electric.svg",
 	evBattery: "ev-battery.svg",
+	evCable: "ev-cable.svg",
+	evCharger: "ev-charger.svg",
 	externalLink: "external-link.svg",
 	eyeClosed: "eye-closed.svg",
 	eyeOpened: "eye-opened.svg",

package/tokens/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}