@drivy/cobalt 0.26.3 → 0.28.0

package/styles/components/Form/Slider.scss

@@ -18,53 +18,57 @@
     }
 
     [data-reach-slider-track] {
-      background: color(grey, light);
+      @include fill-bg-color(subdued);
     }
 
     [data-reach-slider-track-highlight] {
-      background: color(indigo);
+      @include fill-bg-color(accent);
     }
 
     [data-reach-slider-handle] {
+      @include border(base);
       width: spacing(md);
       height: spacing(md);
-      border-width: 0;
+      box-sizing: content-box;
 
-      background: color(white);
+      // The handle will always be white in any cases
+      background: #fff;
+      cursor: pointer;
 
-      box-shadow: elevation(base), 0 0 0 1px color(grey);
+      box-shadow: elevation(base);
       border-radius: 50%;
     }
 
     [data-reach-slider-handle]:not([aria-disabled]):focus {
+      @include border(accent, 2);
       outline: none;
-      box-shadow: elevation(base), 0 0 0 2px color(indigo);
+      box-shadow: elevation(base);
     }
 
     [data-reach-slider-track][data-disabled] {
-      background: color(grey);
+      @include bg-color(disabled);
     }
 
     [data-reach-slider-track-highlight][data-disabled] {
-      background-color: color(grey);
+      @include bg-color(disabled);
     }
 
     [data-reach-slider-handle][aria-disabled] {
-      background-color: color(grey, lighter);
+      @include bg-color(neutralAlt);
     }
 
     &__value-container {
+      @include text-color(base);
       font-size: font-size(body);
-      color: color(graphite);
     }
 
     &__value-meta {
-      color: color(graphite, light);
+      @include text-color(subdued);
     }
 
     &--disabled {
       #{ $self }__value-container {
-        color: color(graphite, light);
+        @include text-color(subdued);
       }
     }
   }

package/styles/components/Form/Stepper.scss

@@ -18,6 +18,7 @@
     }
 
     &__ContentWrapper {
+      @include text-color(base);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -26,15 +27,13 @@
 
       font-size: 32px;
       font-weight: 500;
-      color: color(indigo);
     }
 
     &__Meta {
+      @include text-color(subdued);
       margin-left: spacing(xs);
 
       font-size: 15px;
-
-      color: color(graphite, light);
     }
 
     &__HiddenInput {
@@ -55,7 +54,6 @@
 
       &:focus {
         outline: none;
-        box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.3);
       }
 
       &--disabled {
@@ -66,19 +64,19 @@
 
     &--disabled {
       .cobalt-Stepper__ContentWrapper {
-        color: color(grey);
+        @include text-color(subdued);
       }
     }
 
     &--success {
       .cobalt-Stepper__ContentWrapper {
-        color: $form-element--success-color;
+        @include text-color(success);
       }
     }
 
     &--error {
       .cobalt-Stepper__ContentWrapper {
-        color: $form-element--error-color;
+        @include text-color(error);
       }
     }
   }

package/styles/components/Form/TextArea.scss

@@ -20,7 +20,8 @@
       resize: vertical;
 
       &::placeholder {
-        color: color(grey, dark);
+        @include text-color(subdued);
+        opacity: 0.7;
       }
     }
 
@@ -28,6 +29,7 @@
       @include withContext(".cobalt-FormField--withHint") {
         bottom: spacing(md);
       }
+      @include text-color(subdued);
 
       position: absolute;
 
@@ -41,8 +43,6 @@
       line-height: 24px;
       text-align: right;
 
-      color: color(grey, dark);
-
       animation-name: cobalt-TextAreaField--fade-in;
       animation-duration: 150ms;
 

package/styles/components/Form/TextInput.scss

@@ -3,13 +3,13 @@
 .cobalt- {
   &TextField {
     $self: &;
-    $field-icon-color: color(indigo);
 
     @include form-field-container;
 
     position: relative;
 
     &__Icon {
+      @include semantic-color(base, icon, fill);
       position: absolute;
       top: 0;
       left: spacing(xs);
@@ -17,8 +17,6 @@
       height: 100%;
       display: flex;
 
-      fill: color(grey, dark);
-
       .cobalt-Icon {
         transition: fill 150ms ease-in-out;
       }
@@ -28,7 +26,8 @@
       @include form-input-base($self);
 
       &::placeholder {
-        color: color(grey, dark);
+        @include text-color(subdued);
+        opacity: 0.7;
       }
     }
 
@@ -38,21 +37,23 @@
       }
 
       #{ $self }__Input + #{ $self }__Icon {
-        fill: $field-icon-color;
+        @include semantic-color(accent, icon, fill);
         pointer-events: none;
       }
 
       #{ $self }__Input:placeholder-shown + #{ $self }__Icon {
-        fill: color(grey, dark);
+        @include semantic-color(subdued, icon, fill);
+        opacity: 0.7;
       }
 
       #{ $self }__Input:focus + #{ $self }__Icon,
       #{ $self }__Input:focus:placeholder-shown + #{ $self }__Icon {
-        fill: $field-icon-color;
+        @include semantic-color(accent, icon, fill);
       }
 
       #{ $self }__Input:disabled + #{ $self }__Icon {
-        fill: color(grey, dark);
+        @include semantic-color(subdued, icon, fill);
+        opacity: 0.7;
       }
     }
   }

package/styles/components/Form/ToggleSwitch.scss

@@ -100,17 +100,13 @@ $toggle-switch-size-large: 28px;
     }
 
     &__Label {
+      @include c-text-body-md;
+      @include text-color(base);
       display: inline-block;
 
       flex: 1;
 
       padding: 0 spacing(sm) 0 0;
-
-      font-weight: 400;
-      font-family: font-family(base);
-      font-size: font-size(body);
-      line-height: line-height(body);
-      color: color(graphite);
     }
 
     &__ToggleSwitch {
@@ -124,10 +120,9 @@ $toggle-switch-size-large: 28px;
     }
 
     &__ToggleSwitchSlider {
+      @include semantic-color(base, stroke, background-color);
       display: inline-block;
 
-      background-color: color(grey);
-
       transition: $animation-duration;
     }
 
@@ -139,18 +134,20 @@ $toggle-switch-size-large: 28px;
 
       content: "";
 
-      background-color: color(white);
+      // Toggle switch slider will always be white in any cases
+      background-color: #fff;
 
       transition: $animation-duration;
       will-change: transform;
     }
 
     &__ToggleSwitchSlider:after {
+      @include text-color(accent);
       position: absolute;
 
       opacity: 0;
 
-      box-shadow: 0 0 0 1px color(turquoise);
+      box-shadow: 0 0 0 1px;
 
       content: "";
     }
@@ -168,7 +165,7 @@ $toggle-switch-size-large: 28px;
       &:checked
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        background-color: color(indigo);
+        @include bg-color(accentAlt);
       }
 
       &:not([disabled]) + .cobalt-ToggleSwitchField__ToggleSwitch,
@@ -185,24 +182,25 @@ $toggle-switch-size-large: 28px;
       &[disabled]
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        background-color: color(grey, light);
+        @include bg-color(disabled);
       }
 
       &[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(grey, dark);
+        @include bg-color(accentAlt);
+        opacity: 0.5;
       }
 
       &[disabled] ~ .cobalt-ToggleSwitchField__Label {
-        color: color(grey, dark);
+        @include text-color(subdued);
+        opacity: 0.7;
       }
 
       &:focus
@@ -216,19 +214,19 @@ $toggle-switch-size-large: 28px;
       .cobalt-ToggleSwitchField__Input
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        box-shadow: inset 0 0 0 2px color(red);
+        @include border(error, 2);
       }
 
       .cobalt-ToggleSwitchField__Input:focus
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        box-shadow: inset 0 0 0 2px color(red);
+        @include border(error, 2);
       }
 
       .cobalt-ToggleSwitchField__Input:checked
         + .cobalt-ToggleSwitchField__ToggleSwitch
         .cobalt-ToggleSwitchField__ToggleSwitchSlider {
-        background-color: color(red);
+        @include bg-color(error);
       }
     }
 

package/styles/components/Form/field.scss

@@ -35,6 +35,7 @@ $formfield-maxwidth: 600px;
     }
 
     > .cobalt-FormField__Label {
+      @include text-color(base);
       display: inline-block;
 
       padding: 0 0 10px 1px;
@@ -42,7 +43,6 @@ $formfield-maxwidth: 600px;
       font-size: 14px;
       font-weight: 600;
       line-height: 18px;
-      color: color(graphite);
     }
 
     .cobalt-Hint {

package/styles/components/Form/form.scss

@@ -1,38 +1,22 @@
-$form-element--default-color: color(grey, dark);
-$form-element--default-active-color: color(indigo);
-$form-element--success-color: color(green);
-$form-element--error-color: color(red);
-
 @mixin form-input-base($container) {
+  @include text-color(base);
+  @include border(strongInteractive);
+  @include bg-color(secondary);
   @include withContext(#{$container}--success) {
-    border-color: $form-element--success-color;
-
-    &:not(:disabled):hover {
-      border: 1px solid $form-element--success-color;
-    }
+    @include border-color(success);
 
+    &:not(:disabled):hover,
     &: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 border(success);
     }
   }
 
   @include withContext(#{$container}--error) {
-    border-color: $form-element--error-color;
-
-    &:not(:disabled):hover {
-      border: 1px solid $form-element--error-color;
-    }
+    @include border-color(error);
 
+    &:not(:disabled):hover,
     &: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;
+      @include border(error);
     }
   }
 
@@ -42,38 +26,25 @@ $form-element--error-color: color(red);
   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):not(:read-only):hover {
-    border: 1px solid $form-element--default-color;
-
-    color: color(graphite);
+    @include text-color(base);
 
     box-shadow: elevation(base);
   }
 
   &:not(:disabled):not(:read-only):focus {
-    border-color: $form-element--default-active-color;
-
-    border-width: 1px;
+    @include border(accent, 2);
 
     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;
   }
 
   &:not(select):read-only:focus {
@@ -86,11 +57,9 @@ $form-element--error-color: color(red);
 
   &:disabled,
   &:not(select):read-only {
-    border-color: $form-element--default-color;
-
-    color: color(graphite, light);
-
-    background-color: color(grey, light);
+    @include border-color(base);
+    @include text-color(subdued);
+    @include bg-color(neutral);
   }
 
   &:disabled {

package/styles/components/Icon/iconColors.scss

@@ -58,6 +58,10 @@
   fill: var(--c-icon-info);
 }
 
+.cobalt-Icon--colorInfoAlt {
+  fill: var(--c-icon-infoAlt);
+}
+
 .cobalt-Icon--colorError {
   fill: var(--c-icon-error);
 }
@@ -74,6 +78,10 @@
   fill: var(--c-icon-successAlt);
 }
 
+.cobalt-Icon--colorWarning {
+  fill: var(--c-icon-warning);
+}
+
 .cobalt-Icon--colorConnect {
   fill: var(--c-icon-connect);
 }
@@ -90,14 +98,6 @@
   fill: var(--c-icon-owner);
 }
 
-.cobalt-Icon--colorWarning {
-  fill: var(--c-icon-warning);
-}
-
-.cobalt-Icon--colorInfoAlt {
-  fill: var(--c-icon-infoAlt);
-}
-
 .cobalt-Icon--colorInversed {
   fill: var(--c-icon-inversed);
 }

package/styles/components/Modal/index.scss

@@ -94,7 +94,7 @@ $reach-ui-dialog-margin-top: 10vh;
       padding: spacing(none);
 
       cursor: cursor(pointer);
-      background-color: color(transparent);
+      background-color: transparent;
     }
   }
 }

package/styles/core/_colors-map.scss

@@ -39,7 +39,11 @@ $theme-colors-map: (
     owner: var(--c-l-indigo-dark),
     disabled: var(--c-l-grey-light),
     neutral: var(--c-l-grey-light),
-    neutralAlt: var(--c-l-grey-lighter)
+    neutralAlt: var(--c-l-grey-lighter),
+    seasonLow: var(--c-l-deprecatedSeasonLow),
+    seasonMedium: var(--c-l-deprecatedSeasonMedium),
+    seasonHigh: var(--c-l-deprecatedSeasonHigh),
+    seasonVeryHigh: var(--c-l-deprecatedSeasonVeryHigh)
   ),
   text: (
     base: var(--c-l-graphite),
@@ -63,15 +67,15 @@ $theme-colors-map: (
       hover: var(--c-l-white)
     ),
     info: var(--c-l-graphite-light),
+    infoAlt: var(--c-l-turquoise),
     error: var(--c-l-red),
     errorAlt: var(--c-l-white),
     success: var(--c-l-green),
     successAlt: var(--c-l-white),
+    warning: var(--c-l-coral),
     connect: var(--c-l-turquoise),
     driver: var(--c-l-graphite),
     owner: var(--c-l-white),
-    warning: var(--c-l-coral),
-    infoAlt: var(--c-l-turquoise),
     inversed: var(--c-l-white)
   ),
   buttonBackground: (
@@ -186,16 +190,16 @@ $theme-colors-map: (
       hover: var(--c-l-white)
     ),
     info: var(--c-l-graphite-light),
+    infoAlt: var(--c-l-turquoise),
     error: var(--c-l-red),
     errorAlt: var(--c-l-red),
     success: var(--c-l-green),
     successAlt: var(--c-l-white),
+    warning: var(--c-l-coral),
     connect: var(--c-l-turquoise),
     connectAlt: var(--c-l-turquoise),
     driver: var(--c-l-graphite),
     owner: var(--c-l-white),
-    warning: var(--c-l-coral),
-    infoAlt: var(--c-l-turquoise),
     inversed: var(--c-l-white),
     disabled: var(--c-l-grey-lighter)
   ),
@@ -206,6 +210,12 @@ $theme-colors-map: (
       hover: var(--c-l-graphite-light),
       press: var(--c-l-graphite)
     ),
+    strong: var(--c-l-grey-dark),
+    strongInteractive: (
+      DEFAULT: var(--c-l-grey-dark),
+      hover: var(--c-l-graphite-light),
+      press: var(--c-l-graphite)
+    ),
     subdued: var(--c-l-grey-light),
     accent: var(--c-l-indigo),
     accentInteractive: (
@@ -226,9 +236,9 @@ $theme-colors-map: (
     accent: var(--c-l-purple),
     accentAlt: var(--c-l-purple),
     error: var(--c-l-red),
-    success: var(--c-l-green),
     negative: var(--c-l-red),
-    neutral: var(--c-l-grey-lighter),
-    disabled: var(--c-l-grey-dark)
+    success: var(--c-l-green),
+    disabled: var(--c-l-grey-dark),
+    neutral: var(--c-l-grey-lighter)
   )
 );

package/styles/core/palette.scss

@@ -18,6 +18,7 @@
   --c-green-1000: #15310d;
   --c-navy-50: #f1f1f4;
   --c-navy-100: #e3e2e8;
+  --c-navy-200: #bbb8c7;
   --c-navy-300: #7b728e;
   --c-navy-500: #362e53;
   --c-navy-700: #261a48;
@@ -58,6 +59,14 @@
   --c-yellow-700: #c59548;
   --c-yellow-900: #75592d;
   --c-yellow-1000: #3b2e17;
+  --c-season-100: #bdffac;
+  --c-season-200: #94ea84;
+  --c-season-300: #73c865;
+  --c-season-400: #54a949;
+  --c-season-700: #0b7011;
+  --c-season-800: #005100;
+  --c-season-900: #030;
+  --c-season-1000: #001900;
   --c-l-white: #fff;
   --c-l-grey-lighter: #f8f7f8;
   --c-l-grey-light: #edebed;
@@ -79,4 +88,8 @@
   --c-l-blue: #2ea2ea;
   --c-l-deprecatedBlueGhost: #2ea2ea0f;
   --c-l-deprecatedDriver: #ffd988;
+  --c-l-deprecatedSeasonLow: #bdffac;
+  --c-l-deprecatedSeasonMedium: #94ea84;
+  --c-l-deprecatedSeasonHigh: #73c865;
+  --c-l-deprecatedSeasonVeryHigh: #54a949;
 }

package/styles/core/theme.scss

@@ -29,6 +29,10 @@
   --c-background-disabled: var(--c-l-grey-light);
   --c-background-neutral: var(--c-l-grey-light);
   --c-background-neutralAlt: var(--c-l-grey-lighter);
+  --c-background-seasonLow: var(--c-l-deprecatedSeasonLow);
+  --c-background-seasonMedium: var(--c-l-deprecatedSeasonMedium);
+  --c-background-seasonHigh: var(--c-l-deprecatedSeasonHigh);
+  --c-background-seasonVeryHigh: var(--c-l-deprecatedSeasonVeryHigh);
   --c-text-base: var(--c-l-graphite);
   --c-text-baseInteractive: var(--c-l-graphite);
   --c-text-baseInteractive--hover: var(--c-l-graphite);
@@ -42,15 +46,15 @@
   --c-text-accentAltInteractive: var(--c-l-white);
   --c-text-accentAltInteractive--hover: var(--c-l-white);
   --c-text-info: var(--c-l-graphite-light);
+  --c-text-infoAlt: var(--c-l-turquoise);
   --c-text-error: var(--c-l-red);
   --c-text-errorAlt: var(--c-l-white);
   --c-text-success: var(--c-l-green);
   --c-text-successAlt: var(--c-l-white);
+  --c-text-warning: var(--c-l-coral);
   --c-text-connect: var(--c-l-turquoise);
   --c-text-driver: var(--c-l-graphite);
   --c-text-owner: var(--c-l-white);
-  --c-text-warning: var(--c-l-coral);
-  --c-text-infoAlt: var(--c-l-turquoise);
   --c-text-inversed: var(--c-l-white);
   --c-buttonBackground-selected: var(--c-l-indigo);
   --c-buttonBackground-destructiveInteractive: var(--c-l-red);
@@ -119,22 +123,26 @@
   --c-icon-accentAltInteractive: var(--c-l-white);
   --c-icon-accentAltInteractive--hover: var(--c-l-white);
   --c-icon-info: var(--c-l-graphite-light);
+  --c-icon-infoAlt: var(--c-l-turquoise);
   --c-icon-error: var(--c-l-red);
   --c-icon-errorAlt: var(--c-l-red);
   --c-icon-success: var(--c-l-green);
   --c-icon-successAlt: var(--c-l-white);
+  --c-icon-warning: var(--c-l-coral);
   --c-icon-connect: var(--c-l-turquoise);
   --c-icon-connectAlt: var(--c-l-turquoise);
   --c-icon-driver: var(--c-l-graphite);
   --c-icon-owner: var(--c-l-white);
-  --c-icon-warning: var(--c-l-coral);
-  --c-icon-infoAlt: var(--c-l-turquoise);
   --c-icon-inversed: var(--c-l-white);
   --c-icon-disabled: var(--c-l-grey-lighter);
   --c-stroke-base: var(--c-l-grey);
   --c-stroke-baseInteractive: var(--c-l-grey);
   --c-stroke-baseInteractive--hover: var(--c-l-graphite-light);
   --c-stroke-baseInteractive--press: var(--c-l-graphite);
+  --c-stroke-strong: var(--c-l-grey-dark);
+  --c-stroke-strongInteractive: var(--c-l-grey-dark);
+  --c-stroke-strongInteractive--hover: var(--c-l-graphite-light);
+  --c-stroke-strongInteractive--press: var(--c-l-graphite);
   --c-stroke-subdued: var(--c-l-grey-light);
   --c-stroke-accent: var(--c-l-indigo);
   --c-stroke-accentInteractive: var(--c-l-indigo);
@@ -151,8 +159,8 @@
   --c-fill-accent: var(--c-l-purple);
   --c-fill-accentAlt: var(--c-l-purple);
   --c-fill-error: var(--c-l-red);
-  --c-fill-success: var(--c-l-green);
   --c-fill-negative: var(--c-l-red);
-  --c-fill-neutral: var(--c-l-grey-lighter);
+  --c-fill-success: var(--c-l-green);
   --c-fill-disabled: var(--c-l-grey-dark);
+  --c-fill-neutral: var(--c-l-grey-lighter);
 }