@drivy/cobalt 0.18.1 → 0.19.0

package/cjs/tokens/theme.js

@@ -175,7 +175,7 @@ const stroke = {
 		hover: "indigo/purple.700/purpleDeep.400",
 		press: "indigo.dark/purple.900/purpleDeep.400"
 	},
-	accentAlt: "indigo/purple.300/purpleDeep.700",
+	accentAlt: "purple/purple.300/purpleDeep.700",
 	base: "grey/navy.100/black.50",
 	baseInteractive: {
 		DEFAULT: "grey/navy.100/black.50",

package/components/Modal/ModalHeader.js

@@ -7,7 +7,7 @@ const ModalHeader = ({ title, close, }) => (React.createElement("div", { classNa
     close && (React.createElement("button", { type: "button", className: "cobalt-modal-header__close-button", onClick: close },
         React.createElement(VisuallyHidden, null, "Close"),
         React.createElement("span", { "aria-hidden": true },
-            React.createElement(Icon, { source: "close", color: "graphiteLight" }))))));
+            React.createElement(Icon, { source: "close", color: "subdued" }))))));
 
 export { ModalHeader as default };
 //# sourceMappingURL=ModalHeader.js.map

package/components/Modal/ModalHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport VisuallyHidden from \"@reach/visually-hidden\"\n\nimport { Icon } from \"../Icon\"\n\nconst ModalHeader = ({\n  title,\n  close,\n}: {\n  title?: string\n  close?: () => void\n}) => (\n  <div className=\"cobalt-modal-header\">\n    <h2 className=\"cobalt-modal-header__title\">{title}</h2>\n    {close && (\n      <button\n        type=\"button\"\n        className=\"cobalt-modal-header__close-button\"\n        onClick={close}\n      >\n        <VisuallyHidden>Close</VisuallyHidden>\n        <span aria-hidden>\n          <Icon source=\"close\" color=\"graphiteLight\" />\n        </span>\n      </button>\n    )}\n  </div>\n)\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,MACC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,EAAA;AAClC,IAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,4BAA4B,EAAA,EAAE,KAAK,CAAM;AACtD,IAAA,KAAK,KACJ,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,KAAK,EAAA;AAEd,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAuB,IAAA,EAAA,OAAA,CAAA;AACtC,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,eAAe,GAAG,CACxC,CACA,CACV,CACG;;;;"}
+{"version":3,"file":"ModalHeader.js","sources":["../../../src/components/Modal/ModalHeader.tsx"],"sourcesContent":["import React from \"react\"\nimport VisuallyHidden from \"@reach/visually-hidden\"\n\nimport { Icon } from \"../Icon\"\n\nconst ModalHeader = ({\n  title,\n  close,\n}: {\n  title?: string\n  close?: () => void\n}) => (\n  <div className=\"cobalt-modal-header\">\n    <h2 className=\"cobalt-modal-header__title\">{title}</h2>\n    {close && (\n      <button\n        type=\"button\"\n        className=\"cobalt-modal-header__close-button\"\n        onClick={close}\n      >\n        <VisuallyHidden>Close</VisuallyHidden>\n        <span aria-hidden>\n          <Icon source=\"close\" color=\"subdued\" />\n        </span>\n      </button>\n    )}\n  </div>\n)\n\nexport default ModalHeader\n"],"names":[],"mappings":";;;;AAKA,MAAM,WAAW,GAAG,CAAC,EACnB,KAAK,EACL,KAAK,GAIN,MACC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,qBAAqB,EAAA;AAClC,IAAA,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,4BAA4B,EAAA,EAAE,KAAK,CAAM;AACtD,IAAA,KAAK,KACJ,KACE,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mCAAmC,EAC7C,OAAO,EAAE,KAAK,EAAA;AAEd,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAuB,IAAA,EAAA,OAAA,CAAA;AACtC,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,GAAG,CAClC,CACA,CACV,CACG;;;;"}

package/components/Pill/index.js

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { Icon } from '../Icon/index.js';
 
 const ICON_SIZE = 20;
-const Pill = ({ icon, color = "indigo", children, overlayed, className, size, }) => {
+const Pill = ({ icon, color = "base", children, overlayed, className, size, }) => {
     const iconMarkup = icon ? (React.createElement("span", { className: "cobalt-Pill__Icon" },
         React.createElement(Icon, { source: icon, size: ICON_SIZE, color: overlayed ? "white" : color }))) : null;
     return (React.createElement("div", { className: cx(className, "cobalt-Pill", {

package/components/Pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColorsType\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"indigo\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"white\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorAller\": color === \"aller\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,QAAQ,EAChB,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;IAClB,MAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,EAAA,CAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,yBAAyB,EAAE,KAAK,KAAK,OAAO;AAC5C,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;AAC5D,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC3C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,CACP,CAAC,CACE,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Pill/index.tsx"],"sourcesContent":["import React, { Children } from \"react\"\nimport cx from \"classnames\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nconst ICON_SIZE = 20\nexport interface PillPropsType {\n  children: React.ReactNode\n  icon?: IconSources\n  color?: IconColorsType\n  size?: \"large\"\n  overlayed?: boolean\n  className?: string\n}\n\nexport const Pill = ({\n  icon,\n  color = \"base\",\n  children,\n  overlayed,\n  className,\n  size,\n}: PillPropsType) => {\n  const iconMarkup = icon ? (\n    <span className=\"cobalt-Pill__Icon\">\n      <Icon\n        source={icon}\n        size={ICON_SIZE}\n        color={overlayed ? \"white\" : color}\n      />\n    </span>\n  ) : null\n\n  return (\n    <div\n      className={cx(className, \"cobalt-Pill\", {\n        \"cobalt-Pill--colorAller\": color === \"aller\",\n        \"cobalt-Pill--overlayed\": overlayed,\n        \"cobalt-Pill--large\": size === \"large\",\n      })}\n    >\n      {iconMarkup} {children}\n    </div>\n  )\n}\n\nexport interface PillGroupPropsType {\n  children: React.ReactNode\n}\n\nexport const PillGroup = ({ children }: PillGroupPropsType) => {\n  return (\n    <div className=\"cobalt-PillGroup\">\n      {Children.toArray(children).map((child, index) => (\n        <div className=\"cobalt-PillGroup__Item\" key={index}>\n          {child}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default Pill\n"],"names":[],"mappings":";;;;AAIA,MAAM,SAAS,GAAG,EAAE,CAAA;MAUP,IAAI,GAAG,CAAC,EACnB,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,IAAI,GACU,KAAI;IAClB,MAAM,UAAU,GAAG,IAAI,IACrB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,mBAAmB,EAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,SAAS,GAAG,OAAO,GAAG,KAAK,EAAA,CAClC,CACG,IACL,IAAI,CAAA;IAER,QACE,6BACE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,yBAAyB,EAAE,KAAK,KAAK,OAAO;AAC5C,YAAA,wBAAwB,EAAE,SAAS;YACnC,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CAAC,EAAA;QAED,UAAU;;QAAG,QAAQ,CAClB,EACP;AACH,EAAC;MAMY,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAsB,KAAI;AAC5D,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kBAAkB,IAC9B,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAC3C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAC,GAAG,EAAE,KAAK,IAC/C,KAAK,CACF,CACP,CAAC,CACE,EACP;AACH;;;;"}

package/components/PriceTable/index.js

@@ -6,7 +6,8 @@ const PriceTableRow = ({ label, value, discounted = false, }) => (React.createEl
     React.createElement("div", { className: "cobalt-PriceTable__Label" }, label),
     React.createElement("div", { className: cx("cobalt-PriceTable__Value", {
             "cobalt-PriceTable__Value--discount": discounted,
-        }) }, value)));
+        }) }, value)));
+PriceTable.Row = PriceTableRow;
 
-export { PriceTable, PriceTableRow };
+export { PriceTable, PriceTableRow, PriceTable as default };
 //# sourceMappingURL=index.js.map

package/components/PriceTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\ninterface PriceTableRowProps {\n  label: string\n  value: string\n  discounted?: boolean\n}\n\nexport const PriceTableRow = ({\n  label,\n  value,\n  discounted = false,\n}: PriceTableRowProps) => (\n  <div className=\"cobalt-PriceTable__Row\">\n    <div className=\"cobalt-PriceTable__Label\">{label}</div>\n    <div\n      className={classNames(\"cobalt-PriceTable__Value\", {\n        \"cobalt-PriceTable__Value--discount\": discounted,\n      })}\n    >\n      {value}\n    </div>\n  </div>\n)\n"],"names":["classNames"],"mappings":";;;MAGa,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,MACpE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO,EACpD;MAQY,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,UAAU,GAAG,KAAK,GACC,MACnB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA;AACrC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAO;AACvD,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;AAChD,YAAA,oCAAoC,EAAE,UAAU;AACjD,SAAA,CAAC,EAED,EAAA,KAAK,CACF,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PriceTable/index.tsx"],"sourcesContent":["import React from \"react\"\nimport classNames from \"classnames\"\n\nexport const PriceTable = ({ children }: { children: React.ReactNode }) => (\n  <div className=\"cobalt-PriceTable\">{children}</div>\n)\n\ninterface PriceTableRowProps {\n  label: string\n  value: string\n  discounted?: boolean\n}\n\nexport const PriceTableRow = ({\n  label,\n  value,\n  discounted = false,\n}: PriceTableRowProps) => (\n  <div className=\"cobalt-PriceTable__Row\">\n    <div className=\"cobalt-PriceTable__Label\">{label}</div>\n    <div\n      className={classNames(\"cobalt-PriceTable__Value\", {\n        \"cobalt-PriceTable__Value--discount\": discounted,\n      })}\n    >\n      {value}\n    </div>\n  </div>\n)\n\nPriceTable.Row = PriceTableRow\n\nexport default PriceTable\n"],"names":["classNames"],"mappings":";;;MAGa,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAiC,MACpE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,mBAAmB,IAAE,QAAQ,CAAO,EACpD;MAQY,aAAa,GAAG,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,UAAU,GAAG,KAAK,GACC,MACnB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wBAAwB,EAAA;AACrC,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0BAA0B,EAAA,EAAE,KAAK,CAAO;AACvD,IAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEA,EAAU,CAAC,0BAA0B,EAAE;AAChD,YAAA,oCAAoC,EAAE,UAAU;AACjD,SAAA,CAAC,EAED,EAAA,KAAK,CACF,CACF,EACP;AAED,UAAU,CAAC,GAAG,GAAG,aAAa;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -62,12 +62,12 @@
     "@types/jest": "27.5.2",
     "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/react": "17.0.48",
+    "@types/react": "17.0.49",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "autoprefixer": "10.4.8",
     "core-js": "3.24.1",
     "css-loader": "6.7.1",
-    "eslint": "8.22.0",
+    "eslint": "8.23.0",
     "jest": "27.5.1",
     "nested-object-access": "^0.2.5",
     "np": "7.6.2",
@@ -79,12 +79,12 @@
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "rollup": "2.78.1",
+    "rollup": "2.79.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "1.1.0",
     "rollup-plugin-typescript2": "0.33.0",
-    "sass": "1.54.5",
+    "sass": "1.54.8",
     "sass-loader": "12.6.0",
     "sharp": "0.30.7",
     "sharp-cli": "2.1.1",
@@ -138,6 +138,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.48"
+    "@types/react": "17.0.49"
   }
 }

package/styles/components/Buttons/DefaultButton/index.scss

@@ -52,6 +52,6 @@
   &--selected {
     @include semantic-color(selected, buttonBackground, background-color);
     @include semantic-color(selected, buttonLabel, color);
-    @include semantic-color(accentAlt, stroke, border-color);
+    @include border-color(accent);
   }
 }

package/styles/components/Helper/index.scss

@@ -1,12 +1,16 @@
 .cobalt-helper {
+  @include border(base);
+  @include bg-color(secondary);
   padding: spacing(sm);
 
+  // FIXME: remove when releasing semantics color
   background-color: fade-out(color(purple), 0.92);
+
   border-radius: border-radius(xl);
 
   &__title {
     @include text-style-title-small;
-    color: color(graphite);
+    @include text-color(base);
   }
 
   &__content {

package/styles/components/Modal/index.scss

@@ -71,26 +71,21 @@ $reach-ui-dialog-margin-top: 10vh;
   }
 
   &-footer {
-    /* FIXME border function doesn't handle color variant */
-    border-top: border(grey);
-    border-color: color(grey, light);
+    @include border-top(base);
     padding: spacing(sm);
   }
 
   &-header {
+    @include border-bottom(base);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: spacing(md);
-    /* FIXME border function doesn't handle color variant */
-    border-bottom: border(grey);
-    border-color: color(grey, light);
 
     &__title {
       @include c-text-title-md;
+      @include text-color(base);
       margin: spacing(none);
-
-      color: color(indigo, dark);
     }
 
     &__close-button {

package/styles/components/Note/index.scss

@@ -2,14 +2,13 @@
   &Note {
     @include text-style-body;
     @include text-style--bodySubdued;
+    @include bg-color(info);
 
     display: inline-block;
 
-    padding: spacing(tight);
+    padding: spacing(sm);
 
-    background-color: color(acier, lighter);
-
-    border-radius: border-radius(x-large);
+    border-radius: border-radius(lg);
   }
 
   &Note--fullWidth {

package/styles/components/PhotoDropzone/index.scss

@@ -1,4 +1,6 @@
 .cobalt-photo-dropzone {
+  @include bg-color(neutralAlt);
+  @include border(accentAlt, default, dashed);
   position: relative;
 
   display: flex;
@@ -7,13 +9,11 @@
   height: 100%;
   width: 100%;
   min-height: 14rem;
-  border: border(purple, default, dashed);
 
   text-align: center;
 
   border-radius: border-radius(xl);
   cursor: pointer;
-  background-color: color(grey, lighter);
 
   transition: background-color 0.25s;
 }
@@ -31,6 +31,7 @@
 }
 
 .cobalt-photo-dropzone--dragging {
+  // FIXME NEW COLORS: this background doesn't match any semantic color
   background-color: #f6e5f5;
 
   transition: background-color 0.25s;
@@ -42,20 +43,17 @@
 }
 
 .cobalt-photo-dropzone--loading {
-  border-color: color(grey, light);
+  @include bg-color(neutral);
+  @include text-color(accent);
   border-style: solid;
 
-  color: color(indigo, dark);
-
   cursor: default;
-  background-color: color(grey, light);
 }
 
 .cobalt-photo-dropzone--errored {
-  border-color: color(red);
+  @include bg-color(neutral);
+  @include border-color(error);
   border-style: solid;
-
-  background-color: color(grey, light);
 }
 
 .cobalt-photo-dropzone__description {
@@ -66,7 +64,7 @@
 }
 
 .cobalt-photo-dropzone__description--strong {
-  color: color(purple);
+  @include text-color(accent);
   font-weight: 700;
 }
 
@@ -79,6 +77,7 @@
 }
 
 .cobalt-photo-dropzone__delete-button {
+  @include bg-color(neutralAlt);
   position: absolute;
   bottom: 1rem;
   right: 1rem;
@@ -89,7 +88,6 @@
   border: 0;
 
   border-radius: border-radius(full);
-  background: color(white);
   cursor: pointer;
   opacity: 0;
 

package/styles/components/Pill/index.scss

@@ -1,44 +1,43 @@
 $pill-height: 28px;
-$group-item-spacing: spacing(extra-tight);
+$group-item-spacing: spacing(xs);
 
 .cobalt- {
   &Pill {
+    @include bg-color(neutralAlt);
+    @include text-color(base);
     display: inline-flex;
     align-items: center;
 
     height: $pill-height;
-    padding: spacing(unit) spacing(tight);
+    padding: spacing("2xs") spacing(sm);
 
     font-size: 13px;
     white-space: nowrap;
 
-    color: color(indigo);
-
     border-radius: $pill-height;
-
-    background-color: color(acier, lighter);
   }
 
   &Pill--large {
     $pill-height: 40px;
     height: $pill-height;
-    padding: spacing(extra-tight) spacing();
+    padding: spacing(xs) spacing();
 
     border-radius: $pill-height;
   }
 
   &Pill--colorAller {
-    color: color(aller);
+    @include text-color(connect);
   }
 
   &Pill--overlayed {
-    color: color(white);
+    @include text-color(inversed);
 
+    // FIXME NEW COLORS: this background doesn't match any semantic color
     background-color: rgba(color(graphite), 0.5);
   }
 
   &Pill__Icon {
-    margin-right: spacing(unit);
+    margin-right: spacing("2xs");
   }
 
   &PillGroup {

package/styles/components/PriceTable/index.scss

@@ -6,12 +6,12 @@
     justify-content: space-between;
 
     &:not(:last-child) {
-      margin-bottom: spacing(tight);
+      margin-bottom: spacing(sm);
     }
   }
 
   &PriceTable__Label {
-    margin-right: spacing(unit);
+    margin-right: spacing("2xs");
     width: 100%;
   }
 
@@ -20,11 +20,11 @@
     white-space: nowrap;
 
     &--discount {
-      color: color(signal);
+      @include text-color(success);
     }
 
     &:empty:before {
-      color: color(graphite, light);
+      @include text-color(subdued);
       font-weight: normal;
 
       content: "—";

package/styles/components/ProgressBar/index.scss

@@ -7,7 +7,7 @@
 
   &ProgressBar__Progression {
     @include text-style-title;
-    color: color(aller);
+    @include text-color(infoAlt);
   }
 
   &ProgressBar__Title {
@@ -16,42 +16,42 @@
 
   &ProgressBar__CompletedCheckbox {
     path {
-      fill: color(aller);
+      @include fill-color(secondary);
     }
   }
 
   &ProgressBar__Container {
+    @include bg-color(neutral);
     position: relative;
 
-    margin-top: spacing(tight);
+    margin-top: spacing(sm);
 
-    height: spacing(unit);
+    height: spacing("2xs");
     width: 100%;
 
     border-radius: 2px;
-    background-color: color(acier, light);
   }
 
   &ProgressBar__Foreground {
+    @include semantic-color(secondary, fill, background-color);
     position: absolute;
     left: 0;
     top: 0;
 
-    height: spacing(unit);
+    height: spacing("2xs");
 
     border-radius: 2px;
-    background-color: color(aller);
   }
 
   &ProgressBar__Tick {
+    @include bg-color(neutral);
     position: absolute;
     top: -6px;
     right: 0;
 
-    height: 4 * spacing(unit);
-    width: spacing(unit);
+    height: 4 * spacing("2xs");
+    width: spacing("2xs");
 
     border-radius: 2px;
-    background-color: color(acier, light);
   }
 }

package/styles/core/_colors-map.scss

@@ -176,7 +176,7 @@ $theme-colors-map: (
       hover: var(--c-l-indigo),
       press: var(--c-l-indigo-dark)
     ),
-    accentAlt: var(--c-l-indigo),
+    accentAlt: var(--c-l-purple),
     base: var(--c-l-grey),
     baseInteractive: (
       DEFAULT: var(--c-l-grey),

package/styles/core/border.scss

@@ -13,7 +13,7 @@ $border-style-data: (
   dashed: dashed
 );
 
-@mixin border-style($style: solid, $position) {
+@mixin border-style($style: solid, $position: "") {
   $styleValue: map-get($border-style-data, $style);
   @if type-of($styleValue) != string {
     @error "Border style `#{$style}` not found.";
@@ -33,7 +33,7 @@ $border-style-data: (
   }
 }
 
-@mixin border-width($size: default, $position) {
+@mixin border-width($size: default, $position: "") {
   $sizeValue: map-get($border-size-data, $size);
   @if type-of($sizeValue) != number {
     @error "Border size `#{$size}` not found.";

package/styles/core/theme.scss

@@ -113,7 +113,7 @@
   --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-accentAlt: var(--c-l-purple);
   --c-stroke-base: var(--c-l-grey);
   --c-stroke-baseInteractive: var(--c-l-grey);
   --c-stroke-baseInteractive--hover: var(--c-l-graphite-light);

package/tokens/theme.js

@@ -171,7 +171,7 @@ const stroke = {
 		hover: "indigo/purple.700/purpleDeep.400",
 		press: "indigo.dark/purple.900/purpleDeep.400"
 	},
-	accentAlt: "indigo/purple.300/purpleDeep.700",
+	accentAlt: "purple/purple.300/purpleDeep.700",
 	base: "grey/navy.100/black.50",
 	baseInteractive: {
 		DEFAULT: "grey/navy.100/black.50",

package/types/components/PriceTable/index.d.ts

@@ -1,11 +1,14 @@
 import React from "react";
-export declare const PriceTable: ({ children }: {
-    children: React.ReactNode;
-}) => JSX.Element;
+export declare const PriceTable: {
+    ({ children }: {
+        children: React.ReactNode;
+    }): JSX.Element;
+    Row: ({ label, value, discounted, }: PriceTableRowProps) => JSX.Element;
+};
 interface PriceTableRowProps {
     label: string;
     value: string;
     discounted?: boolean;
 }
 export declare const PriceTableRow: ({ label, value, discounted, }: PriceTableRowProps) => JSX.Element;
-export {};
+export default PriceTable;

package/utilities.css

@@ -3830,7 +3830,7 @@
 }
 
 .c-border-accentAlt {
-  border-color: #61366b
+  border-color: #b01aa7
 }
 
 .c-border-base {