@drivy/cobalt 0.26.3 → 0.27.0

package/cjs/tokens/palette.js

@@ -24,6 +24,7 @@ const green = {
 const navy = {
 	"50": "#F1F1F4",
 	"100": "#E3E2E8",
+	"200": "#BBB8C7",
 	"300": "#7B728E",
 	"500": "#362E53",
 	"700": "#261A48",

package/cjs/tokens/palette.js.map

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

package/cjs/tokens/theme.js

@@ -205,6 +205,12 @@ const stroke = {
 		hover: "graphite.light/navy.300/purpleDeep.400",
 		press: "graphite/navy.500/purpleDeep.400"
 	},
+	strong: "grey.dark/navy.200/grey.200",
+	strongInteractive: {
+		DEFAULT: "grey.dark/navy.200/grey.200",
+		hover: "graphite.light/navy.300/purpleDeep.400",
+		press: "graphite/navy.500/purpleDeep.400"
+	},
 	subdued: "grey.light/navy.100/black.50",
 	accent: "indigo/purple.500/purpleDeep.400",
 	accentInteractive: {

package/cjs/tokens/theme.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.26.3",
+  "version": "0.27.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -32,7 +32,7 @@
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
     "nanoid": "4.0.0",
-    "postcss": "8.4.20",
+    "postcss": "8.4.21",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },

package/styles/components/Buttons/index.scss

@@ -92,7 +92,7 @@
   }
 
   &[aria-busy="true"] .cob-Button__content {
-    color: color(transparent);
+    color: transparent;
   }
 
   &[disabled],

package/styles/components/Form/Autocomplete/index.scss

@@ -71,11 +71,9 @@
   &--forceDisplayResults
     .cobalt-Autocomplete__input-wrapper
     .cobalt-TextField__Input {
+    @include border(accent, 2);
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
-
-    box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.16),
-      inset 0 0 0 1px $form-element--default-active-color;
   }
 
   &__list {

package/styles/components/Form/CheckablePill.scss

@@ -3,11 +3,8 @@
 .cobalt-CheckablePillField {
   $self: &;
   $height: 40px;
-  $border-width: 2px;
   $animation-duration: 100ms;
   $toggle-switch-focus-offset: math.div($height, 10);
-  $main-color: color(indigo);
-  $main-color-light: color(indigo);
 
   position: relative;
 
@@ -31,6 +28,9 @@
   }
 
   &__Label {
+    @include border(base, 2);
+    @include text-color(base);
+    @include bg-color(secondary);
     position: relative;
 
     display: flex;
@@ -38,21 +38,17 @@
     height: $height;
     box-sizing: border-box;
     padding: 0 spacing(md);
-    border: $border-width solid color(grey);
 
-    line-height: $height - $border-width * 2;
-    color: $main-color-light;
+    // We remove the border-bottom and border-top width
+    line-height: $height - 2px * 2;
 
     border-radius: math.div($height, 2);
-    background-color: color(white);
     box-shadow: 0 2px 6px 0 rgba(#000, 0.12);
 
     transition: $animation-duration;
 
     &:hover {
-      border-color: $main-color-light;
-
-      fill: $main-color;
+      @include border-color(accent);
       box-shadow: 0 4px 4px 0 rgba(#000, 0.16);
 
       transform: translateY(-1px);
@@ -70,63 +66,62 @@
   }
 
   &__Input:focus + #{ $self }__Label:after {
+    // Color the shadow by using default text color
+    @include text-color(accent);
     position: absolute;
 
-    box-shadow: 0 0 0 1px color(turquoise);
+    box-shadow: 0 0 0 1px;
     content: "";
   }
 
   &__Input:disabled + #{ $self }__Label {
-    border: $border-width solid color(grey);
+    @include border(base, 2);
+    @include bg-color(disabled);
 
     cursor: default;
     box-shadow: none;
-    background-color: color(grey, light);
     opacity: 0.8;
 
     transform: none;
   }
 
   &__Input:checked + #{ $self }__Label {
+    @include bg-color(accentAlt);
+    @include text-color(accentAlt);
     border-color: transparent;
-
-    color: color(white);
-
-    background-color: $main-color-light;
   }
 
   &--with-icon {
     .cobalt-Icon {
+      @include semantic-color(base, icon, fill);
       margin-right: spacing(xs);
 
-      fill: $main-color-light;
-
       transition: fill $animation-duration ease-in-out;
     }
 
     #{ $self }__Input:checked + #{ $self }__Label .cobalt-Icon {
-      fill: color(white);
+      @include semantic-color(accentAlt, icon, fill);
     }
   }
 
   &--error {
     #{ $self }__Input + #{ $self }__Label {
-      border-color: color(red);
-
-      color: $main-color-light;
+      @include border-color(error);
+      @include text-color(base);
+      @include bg-color(secondary);
 
-      background-color: color(white);
+      .cobalt-Icon {
+        @include semantic-color(base, icon, fill);
+      }
     }
 
     #{ $self }__Input:checked + #{ $self }__Label {
-      border-color: transparent;
-
-      color: color(white);
-
-      background-color: color(red);
+      @include text-color(errorAlt);
+      @include bg-color(errorAlt);
+      @include border-color(errorAlt);
 
       .cobalt-Icon {
-        fill: color(white);
+        @include semantic-color(errorAlt, icon, fill);
       }
     }
   }

package/styles/components/Form/Checkmark.scss

@@ -1,15 +1,10 @@
-@import "./form";
-
 .cobalt- {
   &CheckmarkField {
     $self: &;
-
-    $disabled-color: color(grey, dark);
-    $error-color: $form-element--error-color;
-
     $radio-checkmark-size: 20px;
     $checkbox-checkmark-size: 18px;
-    $checkmark-color: color(indigo);
+
+    @include text-color(base);
 
     position: relative;
 
@@ -20,7 +15,6 @@
     font-family: font-family(base);
     font-size: font-size(body);
     line-height: line-height(body);
-    color: color(graphite);
 
     &__Input {
       position: absolute;
@@ -33,12 +27,12 @@
       opacity: 0;
 
       & + #{ $self }__Checkmark {
+        @include border(accent, 2);
         display: inline-block;
 
         flex: 0 0 auto;
 
         margin-right: spacing(xs);
-        border: 2px solid $checkmark-color;
 
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
         cursor: pointer;
@@ -47,11 +41,7 @@
       }
 
       &[disabled] ~ .cobalt-CheckmarkField__Label {
-        color: $disabled-color;
-      }
-
-      &:focus + #{ $self }__Checkmark {
-        box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.3);
+        @include text-color(subdued);
       }
     }
 
@@ -67,20 +57,21 @@
       }
 
       & + #{ $self }__Checkmark::after {
+        @include border(accent);
+        @include bg-color(accentAlt);
+
         position: absolute;
 
         top: 3px;
         left: 3px;
-
-        border: 5px solid $checkmark-color;
+        // Exception for radio inputs
+        border-width: 5px;
 
         border-radius: 50%;
 
         content: "";
         opacity: 0;
 
-        background-color: $checkmark-color;
-
         transition: transform 120ms ease-in-out;
 
         transform: scale(0.4);
@@ -95,15 +86,14 @@
       }
 
       &[disabled] + #{ $self }__Checkmark {
-        border-color: $disabled-color;
+        @include border-color(subdued);
 
         box-shadow: none;
       }
 
       &[disabled]:checked ~ #{ $self }__Checkmark::after {
-        border-color: $disabled-color;
-
-        background-color: $disabled-color;
+        @include border-color(subdued);
+        @include bg-color(disabled);
       }
     }
 
@@ -130,7 +120,7 @@
       }
 
       &:checked + #{ $self }__Checkmark {
-        background-color: $checkmark-color;
+        @include bg-color(accentAlt);
         will-change: background-color;
       }
 
@@ -149,13 +139,13 @@
       }
 
       &[disabled] + #{ $self }__Checkmark {
-        border-color: $disabled-color;
+        @include border-color(subdued);
 
         box-shadow: none;
       }
 
       &[disabled]:checked + #{ $self }__Checkmark {
-        background-color: $disabled-color;
+        @include bg-color(disabled);
       }
     }
 
@@ -173,21 +163,16 @@
 
     &--error {
       #{ $self }__Input + #{ $self }__Checkmark {
-        border-color: $error-color;
-      }
-
-      #{ $self }__Input:focus + #{ $self }__Checkmark {
-        box-shadow: 0 2px 12px 0 rgba($form-element--error-color, 0.36);
+        @include border-color(error);
       }
 
       #{ $self }__Input[type="radio"]:checked + #{ $self }__Checkmark::after {
-        border-color: $error-color;
-
-        background-color: $error-color;
+        @include border-color(error);
+        @include bg-color(errorInteractive);
       }
 
       #{ $self }__Input[type="checkbox"]:checked + #{ $self }__Checkmark {
-        background-color: $error-color;
+        @include bg-color(errorInteractive);
       }
     }
   }

package/styles/components/Form/Fieldset.scss

@@ -1,9 +1,9 @@
 .cobalt- {
   &Fieldset {
-    $border-width: 1px;
+    @include border-top(subdued);
 
-    padding: (spacing(sm) -$border-width) 0 0 0;
-    border-top: $border-width solid color(grey, light);
+    // We remove the border-width
+    padding: (spacing(sm) - 1px) 0 0 0;
 
     & > legend {
       @include c-text-title-sm;

package/styles/components/Form/Hint.scss

@@ -1,7 +1,6 @@
-@import "./form";
-
 .cobalt- {
   &Hint {
+    @include text-color(subdued);
     @include c-text-body-md;
 
     position: relative;
@@ -13,8 +12,6 @@
     justify-content: flex-start;
     align-items: flex-start;
 
-    color: color(graphite, light);
-
     font-size: 13px;
     line-height: 16px;
 
@@ -27,15 +24,15 @@
     }
 
     &--success {
-      color: $form-element--success-color;
+      @include text-color(success);
     }
 
     &--error {
-      color: $form-element--error-color;
+      @include text-color(error);
     }
 
     a {
-      color: color(blue);
+      @include text-color(accentInteractive);
       text-decoration: none;
     }
 

package/styles/components/Form/RadioWithDetails.scss

@@ -7,21 +7,18 @@
   flex-grow: 1;
 
   --visual-radio-size: 18px;
-  --visual-radio-color: #{color(indigo)};
 
   .cobalt-radio-with-details__inner {
+    @include border(strongInteractive);
+    @include text-color(base);
+    @include bg-color(secondary);
     height: 100%;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
 
     padding: spacing(sm);
-    border: border(grey);
-    border-color: color(grey, dark);
 
-    color: color(indigo);
-
-    background-color: color(white);
     cursor: pointer;
     border-radius: border-radius(lg);
 
@@ -43,7 +40,7 @@
   }
 
   .cobalt-radio-with-details__title {
-    color: color(indigo);
+    @include text-color(base);
     font-size: 14px;
     font-weight: 600;
     line-height: 18px;
@@ -53,7 +50,7 @@
 
   .cobalt-radio-with-details__description {
     @include c-text-body-md;
-    color: color(grey, dark);
+    @include text-color(subdued);
 
     transition: color 150ms ease-in-out;
   }
@@ -75,13 +72,13 @@
     wordwrap: normal;
 
     & + #{ $self }__inner #{ $self }__visual-input {
+      @include border(accent, 2);
       position: relative;
       top: 3px;
 
       flex: 0 0 auto;
       width: var(--visual-radio-size);
       height: var(--visual-radio-size);
-      border: 2px solid var(--visual-radio-color);
 
       border-radius: 50%;
 
@@ -92,38 +89,40 @@
     }
 
     &:focus-visible + #{ $self }__inner {
-      outline: color(blue) 1px solid;
-      box-shadow: 0 2px 12px 0 rgba($form-element--default-active-color, 0.3);
+      @include semantic-color(accentAlt, stroke, outline-color);
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
+      outline-style: dashed;
+      outline-width: 1px;
     }
 
     &:checked + #{ $self }__inner {
-      border-color: var(--visual-radio-color);
-
-      color: color(white);
-
-      background-color: var(--visual-radio-color);
+      @include border-color(accent);
+      @include text-color(accentAlt);
+      @include bg-color(accentAlt);
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input {
-      border-color: color(white);
+      @include semantic-color(accentAlt, icon, border-color);
     }
 
     &:checked + #{ $self }__inner #{ $self }__title,
     &:checked + #{ $self }__inner #{ $self }__description {
-      color: color(white);
+      @include text-color(accentAlt);
     }
 
     & + #{ $self }__inner #{ $self }__visual-input::after {
+      @include border(accent);
+      @include bg-color(accentAlt);
       position: absolute;
       left: 2px;
       top: 2px;
 
-      border: 5px solid var(--visual-radio-color);
+      // Execption for radio inputs
+      border-width: 5px;
 
       border-radius: 50%;
       content: "";
       opacity: 0;
-      background-color: var(--visual-radio-color);
 
       transition: transform 120ms ease-in-out;
       transform: scale(0.4);
@@ -131,7 +130,7 @@
     }
 
     &:checked + #{ $self }__inner #{ $self }__visual-input::after {
-      border-color: color(white);
+      @include semantic-color(accentAlt, icon, border-color);
 
       opacity: 1;
 

package/styles/components/Form/Select.scss

@@ -26,7 +26,8 @@
 
       // select placeholder
       &:invalid {
-        color: color(grey, dark) !important;
+        @include text-color(subdued);
+        opacity: 0.7;
       }
 
       &[disabled] {

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/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

@@ -206,6 +206,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: (

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;

package/styles/core/theme.scss

@@ -135,6 +135,10 @@
   --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);

package/styles/core.scss

@@ -7,7 +7,6 @@
 @import "core/border-radius";
 @import "core/border";
 @import "core/breakpoints";
-@import "core/card";
 @import "core/elevation";
 @import "core/spacing";
 @import "core/typography";

package/tokens/palette.js

@@ -20,6 +20,7 @@ const green = {
 const navy = {
 	"50": "#F1F1F4",
 	"100": "#E3E2E8",
+	"200": "#BBB8C7",
 	"300": "#7B728E",
 	"500": "#362E53",
 	"700": "#261A48",

package/tokens/palette.js.map

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

package/tokens/theme.js

@@ -201,6 +201,12 @@ const stroke = {
 		hover: "graphite.light/navy.300/purpleDeep.400",
 		press: "graphite/navy.500/purpleDeep.400"
 	},
+	strong: "grey.dark/navy.200/grey.200",
+	strongInteractive: {
+		DEFAULT: "grey.dark/navy.200/grey.200",
+		hover: "graphite.light/navy.300/purpleDeep.400",
+		press: "graphite/navy.500/purpleDeep.400"
+	},
 	subdued: "grey.light/navy.100/black.50",
 	accent: "indigo/purple.500/purpleDeep.400",
 	accentInteractive: {

package/tokens/theme.js.map

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

package/types/tokens/index.d.ts

@@ -382,6 +382,7 @@ export declare const palette: {
     navy: {
         "50": string;
         "100": string;
+        "200": string;
         "300": string;
         "500": string;
         "700": string;
@@ -642,6 +643,12 @@ export declare const theme: {
             hover: string;
             press: string;
         };
+        strong: string;
+        strongInteractive: {
+            DEFAULT: string;
+            hover: string;
+            press: string;
+        };
         subdued: string;
         accent: string;
         accentInteractive: {

package/utilities.css

@@ -3746,6 +3746,26 @@
   border-color: #333
 }
 
+.c-border-strong {
+  border-color: #a49da7
+}
+
+.c-border-strongInteractive {
+  border-color: #a49da7
+}
+
+.c-border-strongInteractive:hover {
+  border-color: #757575
+}
+
+.c-border-strongInteractive:focus {
+  border-color: #757575
+}
+
+.c-border-strongInteractive:active {
+  border-color: #333
+}
+
 .c-border-subdued {
   border-color: #edebed
 }

package/styles/core/card.scss

@@ -1,31 +0,0 @@
-$card-strip-width: 3px;
-
-// To deprecate
-@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 == 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.";
-    }
-  }
-}