@drivy/cobalt 0.16.2 → 0.18.1

package/styles/components/Tabs/index.scss

@@ -101,6 +101,8 @@ $scrollButtonWidth: 2rem;
 }
 
 .cobalt-tabs__label {
+  @include text-color(subdued);
+  @include bg-color(secondaryInteractive);
   position: relative;
 
   display: flex;
@@ -116,7 +118,6 @@ $scrollButtonWidth: 2rem;
   font-size: 1rem;
   line-height: 1;
   text-transform: uppercase;
-  color: color(graphite, light);
   font-family: font-family(brand);
   font-weight: 700;
 
@@ -126,11 +127,6 @@ $scrollButtonWidth: 2rem;
 
   transition: 0.2s color;
 
-  &:hover,
-  &:focus {
-    background: color(acier, lighter);
-  }
-
   &:after {
     position: absolute;
     bottom: 0;
@@ -149,10 +145,10 @@ $scrollButtonWidth: 2rem;
   }
 
   &.cobalt-tabs__label--selected {
-    color: color(asphalt);
+    @include text-color(base);
 
     &:after {
-      background: color(purple);
+      @include semantic-color(accent, fill, background-color);
 
       transform: scaleX(1);
     }

package/styles/components/Tag/index.scss

@@ -1,26 +1,24 @@
 .cobalt- {
   &Tag {
+    @include bg-color(neutral);
     display: inline-block;
 
-    padding: spacing(unit) spacing(extra-tight);
+    padding: spacing("2xs") spacing(xs);
 
     font-size: 13px;
 
     font-weight: 600;
 
-    background-color: color(acier, light);
-
     border-radius: border-radius();
   }
 
   &Tag--muted {
-    color: color(graphite, light);
-
-    background-color: color(acier, lighter);
+    @include text-color(subdued);
+    @include bg-color(neutralAlt);
   }
 
   &Tag--important {
-    color: color(essence);
+    @include text-color(error);
 
     background-color: lighten(color(essence), 24);
   }

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";

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: (
+    selected: 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: (
+    selected: var(--c-l-white),
+    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: (
+    selected: var(--c-l-white),
+    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;
+}

package/styles/core/theme.scss

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

package/styles/core.scss

@@ -1,3 +1,5 @@
+@import "core/palette";
+@import "core/theme";
 @import "core/utilities";
 @import "core/color";
 @import "core/animation";

package/tokens/colors.js

@@ -27,6 +27,8 @@ const green = {
 	dark: "#00a873"
 };
 const blue = "#2ea2ea";
+const deprecatedBlueGhost = "#2ea2ea0f";
+const deprecatedDriver = "#ffd988";
 var _colors = {
 	white: white,
 	grey: grey,
@@ -38,8 +40,10 @@ var _colors = {
 	amber: amber,
 	red: red,
 	green: green,
-	blue: blue
+	blue: blue,
+	deprecatedBlueGhost: deprecatedBlueGhost,
+	deprecatedDriver: deprecatedDriver
 };
 
-export { amber, blue, coral, _colors as default, graphite, green, grey, indigo, purple, red, turquoise, white };
+export { amber, blue, coral, _colors as default, deprecatedBlueGhost, deprecatedDriver, graphite, green, grey, indigo, purple, red, turquoise, white };
 //# sourceMappingURL=colors.js.map