@drivy/cobalt 0.29.1 → 0.30.0

package/cjs/tokens/theme.js

@@ -48,7 +48,7 @@ const text = {
 	base: "graphite/navy.700/grey.100",
 	baseInteractive: {
 		DEFAULT: "graphite/navy.700/grey.100",
-		hover: "graphite/navy.900/grey.100"
+		hover: "graphite/navy.300/grey.300"
 	},
 	subdued: "graphite.light/navy.300/grey.300",
 	subduedInteractive: {

package/components/Card/index.js

@@ -1,8 +1,9 @@
 import React, { PureComponent } from 'react';
 import cx from 'classnames';
 
-const Card = ({ children, className, flattened }) => (React.createElement("div", { className: cx("cobalt-Card", className, {
-        "cobalt-Card--flattened": flattened,
+const Card = ({ children, className, legacy, responsive, }) => (React.createElement("div", { className: cx("cobalt-Card", className, {
+        "cobalt-Card--legacy": legacy,
+        "cobalt-Card--responsive": responsive,
     }) }, children));
 const getClasses = ({ className = "", tabBar, tight, subdued, divided, }) => {
     return cx(className, "cobalt-Card__Section", {

package/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = {\n  children?: React.ReactNode\n  className?: string\n  flattened?: boolean\n}\n\nexport const Card = ({ children, className, flattened }: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--flattened\": flattened,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  className?: string\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({\n  className = \"\",\n  tabBar,\n  tight,\n  subdued,\n  divided,\n}: CardSectionProps) => {\n  return cx(className, \"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nCard.Section = CardSection\n\nexport default Card\n"],"names":[],"mappings":";;;AASa,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAa,MAChE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AAqBD,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,GACU,KAAI;AACrB,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC3C,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;AACxD,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,SAAS,EACS,KAAI;AACzB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,EAEhD,EAAA,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAE1C,MAAO,WAAY,SAAQ,aAAsC,CAAA;IAErE,MAAM,GAAA;AACJ,QAAA,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;;AAHM,WAAI,CAAA,IAAA,GAAG,eAAe,CAAA;AAM/B,IAAI,CAAC,OAAO,GAAG,WAAW;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = {\n  children?: React.ReactNode\n  className?: string\n  legacy?: boolean\n  // Not used anymore, to remove in the next release\n  flattened?: boolean\n  responsive?: boolean\n}\n\nexport const Card = ({\n  children,\n  className,\n  legacy,\n  responsive,\n}: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--legacy\": legacy,\n      \"cobalt-Card--responsive\": responsive,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  className?: string\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({\n  className = \"\",\n  tabBar,\n  tight,\n  subdued,\n  divided,\n}: CardSectionProps) => {\n  return cx(className, \"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nCard.Section = CardSection\n\nexport default Card\n"],"names":[],"mappings":";;;AAYa,MAAA,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,MAAM,EACN,UAAU,GACA,MACV,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,qBAAqB,EAAE,MAAM;AAC7B,QAAA,yBAAyB,EAAE,UAAU;AACtC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AAqBD,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,GACU,KAAI;AACrB,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC3C,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;AACxD,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,SAAS,EACS,KAAI;AACzB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,EAEhD,EAAA,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAE1C,MAAO,WAAY,SAAQ,aAAsC,CAAA;IAErE,MAAM,GAAA;AACJ,QAAA,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;;AAHM,WAAI,CAAA,IAAA,GAAG,eAAe,CAAA;AAM/B,IAAI,CAAC,OAAO,GAAG,WAAW;;;;"}

package/components/Flash/index.js

@@ -8,9 +8,9 @@ const STATUS_ICONS_MAP = {
     error: "contextualWarningCircleFilled",
 };
 const STATUS_ICON_COLOR_MAP = {
-    info: "turquoise",
-    success: "green",
-    error: "red",
+    info: "info",
+    success: "success",
+    error: "error",
 };
 const Flash = ({ children, status = "info" }) => {
     const icon = STATUS_ICONS_MAP[status]
@@ -18,7 +18,7 @@ const Flash = ({ children, status = "info" }) => {
         : "infoFilled";
     const iconColor = STATUS_ICON_COLOR_MAP[status]
         ? STATUS_ICON_COLOR_MAP[status]
-        : "turquoise";
+        : "base";
     return (React.createElement("div", { className: `cobalt-Flash cobalt-Flash--${status}` },
         React.createElement("div", { className: "cobalt-Flash__wrapper" },
             React.createElement("span", { className: "cobalt-Flash__Icon" },

package/components/Flash/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Flash/index.tsx"],"sourcesContent":["import React from \"react\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nexport type FlashStatus = \"info\" | \"success\" | \"error\"\n\nexport interface FlashProps {\n  children: React.ReactNode\n  status: FlashStatus\n}\n\nconst ICON_SIZE = 20\n\nconst STATUS_ICONS_MAP: { [k in FlashStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in FlashStatus]: IconColorsType } = {\n  info: \"turquoise\",\n  success: \"green\",\n  error: \"red\",\n}\n\nexport const Flash = ({ children, status = \"info\" }: FlashProps) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColorsType = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"turquoise\"\n\n  return (\n    <div className={`cobalt-Flash cobalt-Flash--${status}`}>\n      <div className=\"cobalt-Flash__wrapper\">\n        <span className=\"cobalt-Flash__Icon\">\n          <Icon source={icon} size={ICON_SIZE} color={iconColor} />\n        </span>\n        <span className=\"cobalt-Flash__content\">{children}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,OAAO,EAAE,OAAO;AAChB,IAAA,KAAK,EAAE,KAAK;CACb,CAAA;AAEM,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAc,KAAI;AACjE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAmB,qBAAqB,CAAC,MAAM,CAAC;AAC7D,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,WAAW,CAAA;AAEf,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAA,2BAAA,EAA8B,MAAM,CAAE,CAAA,EAAA;QACpD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;YACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,oBAAoB,EAAA;AAClC,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD;YACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACF,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Flash/index.tsx"],"sourcesContent":["import React from \"react\"\nimport { Icon, IconColorsType, IconSources } from \"../Icon\"\n\nexport type FlashStatus = \"info\" | \"success\" | \"error\"\n\nexport interface FlashProps {\n  children: React.ReactNode\n  status: FlashStatus\n}\n\nconst ICON_SIZE = 20\n\nconst STATUS_ICONS_MAP: { [k in FlashStatus]: IconSources } = {\n  info: \"infoFilled\",\n  success: \"checkCircle\",\n  error: \"contextualWarningCircleFilled\",\n}\n\nconst STATUS_ICON_COLOR_MAP: { [k in FlashStatus]: IconColorsType } = {\n  info: \"info\",\n  success: \"success\",\n  error: \"error\",\n}\n\nexport const Flash = ({ children, status = \"info\" }: FlashProps) => {\n  const icon = STATUS_ICONS_MAP[status]\n    ? STATUS_ICONS_MAP[status]\n    : \"infoFilled\"\n\n  const iconColor: IconColorsType = STATUS_ICON_COLOR_MAP[status]\n    ? STATUS_ICON_COLOR_MAP[status]\n    : \"base\"\n\n  return (\n    <div className={`cobalt-Flash cobalt-Flash--${status}`}>\n      <div className=\"cobalt-Flash__wrapper\">\n        <span className=\"cobalt-Flash__Icon\">\n          <Icon source={icon} size={ICON_SIZE} color={iconColor} />\n        </span>\n        <span className=\"cobalt-Flash__content\">{children}</span>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAUA,MAAM,SAAS,GAAG,EAAE,CAAA;AAEpB,MAAM,gBAAgB,GAAwC;AAC5D,IAAA,IAAI,EAAE,YAAY;AAClB,IAAA,OAAO,EAAE,aAAa;AACtB,IAAA,KAAK,EAAE,+BAA+B;CACvC,CAAA;AAED,MAAM,qBAAqB,GAA2C;AACpE,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf,CAAA;AAEM,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAc,KAAI;AACjE,IAAA,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC;AACnC,UAAE,gBAAgB,CAAC,MAAM,CAAC;UACxB,YAAY,CAAA;AAEhB,IAAA,MAAM,SAAS,GAAmB,qBAAqB,CAAC,MAAM,CAAC;AAC7D,UAAE,qBAAqB,CAAC,MAAM,CAAC;UAC7B,MAAM,CAAA;AAEV,IAAA,QACE,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,CAAA,2BAAA,EAA8B,MAAM,CAAE,CAAA,EAAA;QACpD,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA;YACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,oBAAoB,EAAA;AAClC,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAI,CACpD;YACP,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAC,uBAAuB,EAAA,EAAE,QAAQ,CAAQ,CACrD,CACF,EACP;AACH;;;;"}

package/components/Form/Autocomplete/index.js

@@ -151,7 +151,7 @@ function Autocomplete({ id, icon, status, items, selectedItem, autoFilter = true
                     handleSelectItem(item, e);
                 } }, renderItem ? (renderItem(item, term)) : (React.createElement("span", { className: "cobalt-Autocomplete__item-wrapper" },
                 icon && (React.createElement("span", { className: "cobalt-Autocomplete__item-icon" },
-                    React.createElement(Icon, { source: icon, color: "indigo" }))),
+                    React.createElement(Icon, { source: icon, color: "accent" }))),
                 React.createElement("span", { className: "cobalt-Autocomplete__item-value" },
                     React.createElement(ComboboxOptionText, null)))))))))),
         React.createElement("div", { className: "cobalt-Autocomplete__input-wrapper" },

package/components/Form/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, ElementType } from \"react\"\nimport { useState } from \"react\"\nimport classNames from \"classnames\"\n\nimport {\n  Combobox,\n  ComboboxInput,\n  ComboboxPopover,\n  ComboboxList,\n  ComboboxOption,\n  ComboboxOptionText,\n} from \"@reach/combobox\"\n\nimport { Icon, IconSources } from \"../../Icon\"\n\nimport { withFieldLabelAndHint } from \"../field\"\nimport { TextInputWrapper } from \"../TextInput\"\nimport { FormElement } from \"../form\"\n\nexport interface AutocompleteItem {\n  [x: string]: any\n}\n\ntype ComboboxPopoverType = ElementType<\"div\"> & HTMLDivElement\ntype ComboboxOptionType = HTMLLIElement & React.ElementType<\"li\">\ntype ComboboxOptionMouseEventType = React.MouseEvent<\n  ComboboxOptionType,\n  MouseEvent\n>\n\ntype Props = {\n  icon?: IconSources\n  items: (AutocompleteItem | string)[]\n  minQueryLength?: number\n  autoFilter?: boolean\n  selectedItem?: AutocompleteItem\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  valueKey?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction filterMatchingItems(\n  items: AutocompleteItem[],\n  term: string,\n  minLength: number,\n  valueKey: string\n) {\n  const [matchingItems, setMatchingItems] = useState<AutocompleteItem[]>([])\n\n  useEffect(() => {\n    term.length >= minLength\n      ? setMatchingItems(\n          items.filter((item: AutocompleteItem) => {\n            return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1\n          })\n        )\n      : setMatchingItems([])\n  }, [items, term, valueKey])\n\n  return matchingItems\n}\n\nfunction sanitizeItems(items: (AutocompleteItem | string)[], valueKey: string) {\n  const [sanitizedItems, setSanitizedItems] = useState<AutocompleteItem[]>([])\n  useEffect(() => {\n    setSanitizedItems(\n      items.map((item) =>\n        typeof item === \"string\" ? { [valueKey]: item } : item\n      )\n    )\n  }, [items])\n  return sanitizedItems\n}\n\nfunction Autocomplete({\n  id,\n  icon,\n  status,\n  items,\n  selectedItem,\n  autoFilter = true,\n  minQueryLength = 1,\n  focusOnInit = false,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onQueryChange,\n  onSelectItem,\n  renderItem,\n  inputRef,\n  autocompleteRef,\n  valueKey = \"value\",\n  ...inputProps\n}: Props) {\n  const [term, setTerm] = useState(\"\")\n\n  const [hasFocus, setHasFocus] = useState(false)\n\n  let ignoreFocus = false // extra flag to ignore programmatical focus triggered by click on item\n\n  const results = autoFilter\n    ? filterMatchingItems(\n        sanitizeItems(items, valueKey),\n        term,\n        minQueryLength,\n        valueKey\n      )\n    : sanitizeItems(items, valueKey)\n\n  const comboboxEl = autocompleteRef || useRef<HTMLDivElement>(null)\n\n  const inputEl = inputRef || useRef<HTMLInputElement>(null)\n\n  const popoverEl = useRef<ComboboxPopoverType>(null)\n\n  const giveInputFocus = () => {\n    inputEl.current && inputEl.current.focus()\n  }\n\n  const isMounted = useRef(true)\n  const forceIdTimer = useRef<any>()\n  const focusTimer = useRef<any>()\n  const blurTimer = useRef<any>()\n  const clearInputTimer = useRef<any>()\n\n  function forceId() {\n    // id is overriden by Reach ui Combobox\n    forceIdTimer.current = setTimeout(() => {\n      id && inputEl.current && inputEl.current.setAttribute(\"id\", id)\n    })\n  }\n\n  useEffect(() => {\n    // on mount ...\n    focusOnInit && giveInputFocus()\n\n    return () => {\n      isMounted.current = false\n      forceIdTimer.current && clearTimeout(forceIdTimer.current)\n      focusTimer.current && clearTimeout(focusTimer.current)\n      blurTimer.current && clearTimeout(blurTimer.current)\n      clearInputTimer.current && clearTimeout(clearInputTimer.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    forceId()\n  }, [id])\n\n  useEffect(() => {\n    setTerm(selectedItem ? \"\" + selectedItem[valueKey] : \"\")\n  }, [selectedItem])\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    !ignoreFocus && onFocus && onFocus(event)\n    ignoreFocus = false\n    focusTimer.current = setTimeout(() => {\n      // required by \"forceDisplayResults\" mechanism\n      isMounted.current && setHasFocus(true)\n    }, 100)\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // blur interceptor required by \"forceDisplayResults\" mechanism\n    onBlur && onBlur(event)\n    blurTimer.current = setTimeout(() => {\n      isMounted.current && setHasFocus(false)\n    }, 100)\n  }\n\n  const handleChange = (event: React.FocusEvent<HTMLInputElement>) => {\n    const inputValue = (event.target as HTMLInputElement).value\n    if (inputValue.trim().length || term.length) {\n      // to prevent starting with a space character\n      setTerm(inputValue)\n      onQueryChange && onQueryChange(inputValue)\n    }\n  }\n\n  const handleClearInput = () => {\n    setTerm(\"\")\n    onQueryChange && onQueryChange(\"\")\n\n    clearInputTimer.current = setTimeout(giveInputFocus) //timeout to trigger openOnFocus\n  }\n\n  const handleSelectItem = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType | React.KeyboardEvent<HTMLElement>\n  ) => {\n    // item click interceptor to enable custom select cancellation\n    const processSelection = onSelectItem\n      ? onSelectItem(item, term) !== false\n      : true\n\n    if (processSelection) {\n      setTerm(item[valueKey])\n    } else if (e) {\n      e.preventDefault()\n      ignoreFocus = true\n      giveInputFocus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown && onKeyDown(e)\n\n    // ENTER key down interceptor to enable custom select cancellation\n    const KEY_CODE_ENTER = 13\n\n    // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)\n    const KEY_CODE_BACKSPACE = 8\n\n    if (e.keyCode === KEY_CODE_ENTER) {\n      if (!popoverEl.current) return\n\n      const options = Array.from(\n        popoverEl.current.querySelectorAll(\"[data-reach-combobox-option]\")\n      )\n\n      const selectedItemIndex = options.findIndex(\n        (el) => el.getAttribute(\"aria-selected\") === \"true\"\n      )\n\n      selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e)\n    } else if (e.keyCode === KEY_CODE_BACKSPACE) {\n      if (!inputEl.current) return\n      if (inputEl.current.value.slice(0, -1) === term) {\n        setTerm(inputEl.current.value)\n      }\n    }\n  }\n\n  const shouldDisplayItemsOnEmptyQuery = () => {\n    return !autoFilter && results.length > 0 && term.length === 0 && hasFocus\n  }\n\n  const handleMouseDown = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType\n  ) => {\n    // In a specific case, we force the popover to display (results available, empty input using backspace)\n    // But doing so, reach ui component is not ready for this case and will raise an error\n    // We need to prevent the error and to force the selection\n    if (\n      shouldDisplayItemsOnEmptyQuery() &&\n      popoverEl.current &&\n      popoverEl.current.getAttribute(\"hidden\") != null\n    ) {\n      e.preventDefault() // it will prevent reach ui combobox to raise an error\n      handleSelectItem(item, e) // we force the selection to be processed\n    }\n  }\n\n  return (\n    <Combobox\n      className={classNames(\"cobalt-Autocomplete\", {\n        \"cobalt-Autocomplete--forceDisplayResults\":\n          shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.\n      })}\n      as=\"div\"\n      openOnFocus={true}\n      ref={comboboxEl}\n    >\n      {results.length > 0 && (\n        <ComboboxPopover\n          className=\"cobalt-Autocomplete__popover\"\n          portal={false}\n          ref={popoverEl}\n        >\n          <ComboboxList\n            className=\"cobalt-Autocomplete__list\"\n            aria-label=\"Autocomplete option\"\n          >\n            {results.map((item, index) => (\n              <ComboboxOption\n                className=\"cobalt-Autocomplete__item\"\n                key={index}\n                value={item[valueKey]}\n                onMouseDown={(e: ComboboxOptionMouseEventType) => {\n                  handleMouseDown(item, e)\n                }}\n                onClick={(e: ComboboxOptionMouseEventType) => {\n                  handleSelectItem(item, e)\n                }}\n              >\n                {renderItem ? (\n                  renderItem(item, term)\n                ) : (\n                  <span className=\"cobalt-Autocomplete__item-wrapper\">\n                    {icon && (\n                      <span className=\"cobalt-Autocomplete__item-icon\">\n                        <Icon source={icon} color=\"indigo\" />\n                      </span>\n                    )}\n\n                    <span className=\"cobalt-Autocomplete__item-value\">\n                      <ComboboxOptionText />\n                    </span>\n                  </span>\n                )}\n              </ComboboxOption>\n            ))}\n          </ComboboxList>\n        </ComboboxPopover>\n      )}\n      <div className=\"cobalt-Autocomplete__input-wrapper\">\n        <TextInputWrapper\n          icon={icon}\n          status={status}\n          render={(className) => {\n            return (\n              <ComboboxInput\n                {...inputProps}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                aria-label=\"autocomplete input\"\n                type=\"text\"\n                value={term}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                ref={inputEl}\n                className={className}\n              />\n            )\n          }}\n        />\n\n        {term && (\n          <div\n            className=\"cobalt-Autocomplete__clear-button\"\n            role=\"clear\"\n            onClick={handleClearInput}\n          >\n            <Icon source=\"close\" size={16} />\n          </div>\n        )}\n      </div>\n    </Combobox>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Autocomplete)\nwrappedComponent.displayName = \"Autocomplete\"\n\nexport { wrappedComponent as Autocomplete }\n"],"names":["classNames"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Form/Autocomplete/index.tsx"],"sourcesContent":["import React, { useEffect, useRef, ElementType } from \"react\"\nimport { useState } from \"react\"\nimport classNames from \"classnames\"\n\nimport {\n  Combobox,\n  ComboboxInput,\n  ComboboxPopover,\n  ComboboxList,\n  ComboboxOption,\n  ComboboxOptionText,\n} from \"@reach/combobox\"\n\nimport { Icon, IconSources } from \"../../Icon\"\n\nimport { withFieldLabelAndHint } from \"../field\"\nimport { TextInputWrapper } from \"../TextInput\"\nimport { FormElement } from \"../form\"\n\nexport interface AutocompleteItem {\n  [x: string]: any\n}\n\ntype ComboboxPopoverType = ElementType<\"div\"> & HTMLDivElement\ntype ComboboxOptionType = HTMLLIElement & React.ElementType<\"li\">\ntype ComboboxOptionMouseEventType = React.MouseEvent<\n  ComboboxOptionType,\n  MouseEvent\n>\n\ntype Props = {\n  icon?: IconSources\n  items: (AutocompleteItem | string)[]\n  minQueryLength?: number\n  autoFilter?: boolean\n  selectedItem?: AutocompleteItem\n  focusOnInit?: boolean\n  autocomplete?: boolean\n  valueKey?: string\n  inputRef?: React.RefObject<HTMLInputElement>\n  autocompleteRef?: React.RefObject<HTMLDivElement>\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void\n  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void\n  onQueryChange?: (term: string) => void\n  onSelectItem?: (item: AutocompleteItem, term: string) => boolean\n  renderItem?: (item: AutocompleteItem, term: string) => React.ReactNode\n} & FormElement &\n  React.InputHTMLAttributes<HTMLInputElement>\n\nfunction filterMatchingItems(\n  items: AutocompleteItem[],\n  term: string,\n  minLength: number,\n  valueKey: string\n) {\n  const [matchingItems, setMatchingItems] = useState<AutocompleteItem[]>([])\n\n  useEffect(() => {\n    term.length >= minLength\n      ? setMatchingItems(\n          items.filter((item: AutocompleteItem) => {\n            return item[valueKey].toLowerCase().indexOf(term.toLowerCase()) > -1\n          })\n        )\n      : setMatchingItems([])\n  }, [items, term, valueKey])\n\n  return matchingItems\n}\n\nfunction sanitizeItems(items: (AutocompleteItem | string)[], valueKey: string) {\n  const [sanitizedItems, setSanitizedItems] = useState<AutocompleteItem[]>([])\n  useEffect(() => {\n    setSanitizedItems(\n      items.map((item) =>\n        typeof item === \"string\" ? { [valueKey]: item } : item\n      )\n    )\n  }, [items])\n  return sanitizedItems\n}\n\nfunction Autocomplete({\n  id,\n  icon,\n  status,\n  items,\n  selectedItem,\n  autoFilter = true,\n  minQueryLength = 1,\n  focusOnInit = false,\n  onKeyDown,\n  onFocus,\n  onBlur,\n  onQueryChange,\n  onSelectItem,\n  renderItem,\n  inputRef,\n  autocompleteRef,\n  valueKey = \"value\",\n  ...inputProps\n}: Props) {\n  const [term, setTerm] = useState(\"\")\n\n  const [hasFocus, setHasFocus] = useState(false)\n\n  let ignoreFocus = false // extra flag to ignore programmatical focus triggered by click on item\n\n  const results = autoFilter\n    ? filterMatchingItems(\n        sanitizeItems(items, valueKey),\n        term,\n        minQueryLength,\n        valueKey\n      )\n    : sanitizeItems(items, valueKey)\n\n  const comboboxEl = autocompleteRef || useRef<HTMLDivElement>(null)\n\n  const inputEl = inputRef || useRef<HTMLInputElement>(null)\n\n  const popoverEl = useRef<ComboboxPopoverType>(null)\n\n  const giveInputFocus = () => {\n    inputEl.current && inputEl.current.focus()\n  }\n\n  const isMounted = useRef(true)\n  const forceIdTimer = useRef<any>()\n  const focusTimer = useRef<any>()\n  const blurTimer = useRef<any>()\n  const clearInputTimer = useRef<any>()\n\n  function forceId() {\n    // id is overriden by Reach ui Combobox\n    forceIdTimer.current = setTimeout(() => {\n      id && inputEl.current && inputEl.current.setAttribute(\"id\", id)\n    })\n  }\n\n  useEffect(() => {\n    // on mount ...\n    focusOnInit && giveInputFocus()\n\n    return () => {\n      isMounted.current = false\n      forceIdTimer.current && clearTimeout(forceIdTimer.current)\n      focusTimer.current && clearTimeout(focusTimer.current)\n      blurTimer.current && clearTimeout(blurTimer.current)\n      clearInputTimer.current && clearTimeout(clearInputTimer.current)\n    }\n  }, [])\n\n  useEffect(() => {\n    forceId()\n  }, [id])\n\n  useEffect(() => {\n    setTerm(selectedItem ? \"\" + selectedItem[valueKey] : \"\")\n  }, [selectedItem])\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    !ignoreFocus && onFocus && onFocus(event)\n    ignoreFocus = false\n    focusTimer.current = setTimeout(() => {\n      // required by \"forceDisplayResults\" mechanism\n      isMounted.current && setHasFocus(true)\n    }, 100)\n  }\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // blur interceptor required by \"forceDisplayResults\" mechanism\n    onBlur && onBlur(event)\n    blurTimer.current = setTimeout(() => {\n      isMounted.current && setHasFocus(false)\n    }, 100)\n  }\n\n  const handleChange = (event: React.FocusEvent<HTMLInputElement>) => {\n    const inputValue = (event.target as HTMLInputElement).value\n    if (inputValue.trim().length || term.length) {\n      // to prevent starting with a space character\n      setTerm(inputValue)\n      onQueryChange && onQueryChange(inputValue)\n    }\n  }\n\n  const handleClearInput = () => {\n    setTerm(\"\")\n    onQueryChange && onQueryChange(\"\")\n\n    clearInputTimer.current = setTimeout(giveInputFocus) //timeout to trigger openOnFocus\n  }\n\n  const handleSelectItem = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType | React.KeyboardEvent<HTMLElement>\n  ) => {\n    // item click interceptor to enable custom select cancellation\n    const processSelection = onSelectItem\n      ? onSelectItem(item, term) !== false\n      : true\n\n    if (processSelection) {\n      setTerm(item[valueKey])\n    } else if (e) {\n      e.preventDefault()\n      ignoreFocus = true\n      giveInputFocus()\n    }\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    onKeyDown && onKeyDown(e)\n\n    // ENTER key down interceptor to enable custom select cancellation\n    const KEY_CODE_ENTER = 13\n\n    // BACKSPACE key down interceptor to synchonize react input value and dom input value in some edge case (Comnbobox autocomplete = true)\n    const KEY_CODE_BACKSPACE = 8\n\n    if (e.keyCode === KEY_CODE_ENTER) {\n      if (!popoverEl.current) return\n\n      const options = Array.from(\n        popoverEl.current.querySelectorAll(\"[data-reach-combobox-option]\")\n      )\n\n      const selectedItemIndex = options.findIndex(\n        (el) => el.getAttribute(\"aria-selected\") === \"true\"\n      )\n\n      selectedItemIndex >= 0 && handleSelectItem(results[selectedItemIndex], e)\n    } else if (e.keyCode === KEY_CODE_BACKSPACE) {\n      if (!inputEl.current) return\n      if (inputEl.current.value.slice(0, -1) === term) {\n        setTerm(inputEl.current.value)\n      }\n    }\n  }\n\n  const shouldDisplayItemsOnEmptyQuery = () => {\n    return !autoFilter && results.length > 0 && term.length === 0 && hasFocus\n  }\n\n  const handleMouseDown = (\n    item: AutocompleteItem,\n    e: ComboboxOptionMouseEventType\n  ) => {\n    // In a specific case, we force the popover to display (results available, empty input using backspace)\n    // But doing so, reach ui component is not ready for this case and will raise an error\n    // We need to prevent the error and to force the selection\n    if (\n      shouldDisplayItemsOnEmptyQuery() &&\n      popoverEl.current &&\n      popoverEl.current.getAttribute(\"hidden\") != null\n    ) {\n      e.preventDefault() // it will prevent reach ui combobox to raise an error\n      handleSelectItem(item, e) // we force the selection to be processed\n    }\n  }\n\n  return (\n    <Combobox\n      className={classNames(\"cobalt-Autocomplete\", {\n        \"cobalt-Autocomplete--forceDisplayResults\":\n          shouldDisplayItemsOnEmptyQuery(), // Combobox Component, by design, hide the popover when the input is empty (on change) even if there are some results.\n      })}\n      as=\"div\"\n      openOnFocus={true}\n      ref={comboboxEl}\n    >\n      {results.length > 0 && (\n        <ComboboxPopover\n          className=\"cobalt-Autocomplete__popover\"\n          portal={false}\n          ref={popoverEl}\n        >\n          <ComboboxList\n            className=\"cobalt-Autocomplete__list\"\n            aria-label=\"Autocomplete option\"\n          >\n            {results.map((item, index) => (\n              <ComboboxOption\n                className=\"cobalt-Autocomplete__item\"\n                key={index}\n                value={item[valueKey]}\n                onMouseDown={(e: ComboboxOptionMouseEventType) => {\n                  handleMouseDown(item, e)\n                }}\n                onClick={(e: ComboboxOptionMouseEventType) => {\n                  handleSelectItem(item, e)\n                }}\n              >\n                {renderItem ? (\n                  renderItem(item, term)\n                ) : (\n                  <span className=\"cobalt-Autocomplete__item-wrapper\">\n                    {icon && (\n                      <span className=\"cobalt-Autocomplete__item-icon\">\n                        <Icon source={icon} color=\"accent\" />\n                      </span>\n                    )}\n\n                    <span className=\"cobalt-Autocomplete__item-value\">\n                      <ComboboxOptionText />\n                    </span>\n                  </span>\n                )}\n              </ComboboxOption>\n            ))}\n          </ComboboxList>\n        </ComboboxPopover>\n      )}\n      <div className=\"cobalt-Autocomplete__input-wrapper\">\n        <TextInputWrapper\n          icon={icon}\n          status={status}\n          render={(className) => {\n            return (\n              <ComboboxInput\n                {...inputProps}\n                autoComplete=\"off\"\n                autoCorrect=\"off\"\n                autoCapitalize=\"off\"\n                spellCheck={false}\n                aria-label=\"autocomplete input\"\n                type=\"text\"\n                value={term}\n                onChange={handleChange}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onKeyDown={handleKeyDown}\n                ref={inputEl}\n                className={className}\n              />\n            )\n          }}\n        />\n\n        {term && (\n          <div\n            className=\"cobalt-Autocomplete__clear-button\"\n            role=\"clear\"\n            onClick={handleClearInput}\n          >\n            <Icon source=\"close\" size={16} />\n          </div>\n        )}\n      </div>\n    </Combobox>\n  )\n}\n\nconst wrappedComponent = withFieldLabelAndHint(Autocomplete)\nwrappedComponent.displayName = \"Autocomplete\"\n\nexport { wrappedComponent as Autocomplete }\n"],"names":["classNames"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.29.1",
+  "version": "0.30.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",

package/styles/components/Alerter/index.scss

@@ -34,10 +34,8 @@
     pointer-events: auto;
 
     &--info {
-      // TOFIX: there is no matching semantic color for this case
-      color: color(white);
-
-      background-color: color(graphite);
+      @include bg-color(info);
+      @include text-color(info);
     }
 
     &--success {

package/styles/components/BulletList/index.scss

@@ -26,8 +26,7 @@
     svg,
     use,
     g {
-      // TOFIX: find a way to use new colors here
-      fill: rgba(color(graphite), 0.5);
+      @include fill-color(subdued);
     }
   }
 }

package/styles/components/Buttons/index.scss

@@ -46,7 +46,6 @@
   white-space: normal;
 
   border-radius: border-radius(md);
-  box-shadow: 0 2px 8px 0 rgba(#000, 0.08);
 
   cursor: pointer;
   user-select: none;

package/styles/components/Calendar/CalendarRangePicker/index.scss

@@ -1,13 +1,9 @@
 @use "sass:math";
 
 .cobalt-CalendarRangePicker {
-  // TOFIX change it to AccentAlt color
-  $calendar-range-day-color: lighten(color(purple, light), 29);
-  $calendar-selected-day-invalid-color: color(red);
-  // TOFIX change it to ErrorAlt color
-  $calendar-range-day-invalid-color: lighten(color(red), 20);
-  // TOFIX find a semantic color equivalent
-  $calendar-out-of-range-color: darken($calendar-range-day-invalid-color, 8);
+  $calendar-range-day-color: var(--c-background-accentAlt);
+  $calendar-range-day-invalid-color: var(--c-background-errorAlt);
+  $calendar-out-of-range-color: var(--c-background-error);
 
   $calendar-day-inner-height: 24px;
   $calendar-day-padding: 6px;
@@ -45,7 +41,7 @@
 
     border-radius: 50%;
 
-    box-shadow: rgba(176, 26, 167, 0.4) 0 2px 6px 0;
+    box-shadow: var(--c-background-accentAlt) 0 2px 6px 0;
   }
 
   position: relative;
@@ -59,9 +55,8 @@
   }
 
   &__month {
+    @include bg-color(secondary);
     flex: 1;
-
-    background-color: color(white);
   }
 
   &__month-header {
@@ -92,11 +87,11 @@
   }
 
   &__month__day-header {
+    @include text-color(subdued);
     flex: 1;
 
     text-align: center;
     text-transform: capitalize;
-    color: color(grey, dark);
     font-weight: 400;
     font-size: 14px;
   }
@@ -129,7 +124,7 @@
     }
 
     &--today {
-      color: color(purple);
+      @include text-color(accent);
       font-weight: 600;
     }
 
@@ -140,8 +135,7 @@
     }
 
     &--disabled {
-      color: color(grey);
-
+      @include text-color(subdued);
       cursor: auto;
     }
 
@@ -178,7 +172,8 @@
       .cobalt-CalendarRangePicker__day-inner:before {
       @include start-end-day;
 
-      box-shadow: white 0 0 0 2px, rgb(176, 26, 167) 0 0 0 4px;
+      box-shadow: var(--c-background-secondary) 0 0 0 2px,
+        var(--c-background-accent) 0 0 0 4px;
     }
 
     // start/end day content when the other one is currently edited + today
@@ -188,8 +183,8 @@
     &--endDay.cobalt-CalendarRangePicker__day--today:not(
         &--startDay
       ).cobalt-CalendarRangePicker__day--subdued {
+      @include text-color(accent);
       font-weight: 600;
-      color: color(purple);
     }
 
     // not today
@@ -199,8 +194,8 @@
     &--endDay:not(&--startDay):not(
         &--today
       ).cobalt-CalendarRangePicker__day--subdued {
+      @include text-color(base);
       font-weight: inherit;
-      color: black;
     }
 
     // start/end day background (circle) when the other one is currently edited
@@ -305,7 +300,7 @@
     &--endDay .cobalt-CalendarRangePicker__day-inner:after {
       @include bg-color(error);
 
-      box-shadow: rgba($calendar-selected-day-invalid-color, 0.4) 0 2px 6px 0;
+      box-shadow: var(--c-background-errorAlt) 0 2px 6px 0;
     }
 
     // invalid start/end day background (circle) when the other one is currently edited

package/styles/components/Calendar/CalendarView/index.scss

@@ -38,24 +38,22 @@ $daySize: spacing(md);
     border-radius: math.div($daySize, 2);
 
     &--disabled {
-      @include bg-color(disabled);
+      @include bg-color(neutral);
+      @include text-color(subdued);
     }
 
     &--highlighted {
       @include text-color(inversed);
-
-      // TOFIX find a semantic color equivalent
-      background-color: color(turquoise);
+      @include bg-color(connect);
     }
 
     &--semi-highlighted {
-      // TOFIX find a semantic color equivalent
-      background-color: lighten(color(turquoise), 30);
+      @include bg-color(connectAlt);
     }
 
     &--past {
-      // TOFIX find a semantic color equivalent
-      color: color(grey);
+      @include text-color(subdued);
+      opacity: 0.4;
     }
 
     &:not(:first-child) {

package/styles/components/Card/index.scss

@@ -1,20 +1,27 @@
 .cobalt- {
-  $card-border-radius: border-radius(base);
+  $card-border-radius: border-radius(xl);
   // deprecated
   $legacy-card-padding-tight: 12px;
 
   &Card {
     @include bg-color(secondary);
+    @include border(base);
     width: 100%;
 
     border-radius: $card-border-radius;
 
-    box-shadow: elevation(base);
+    &--legacy {
+      border: 0;
 
-    &--flattened {
-      @include border(base);
+      box-shadow: elevation(base);
+    }
 
-      box-shadow: none;
+    &--responsive {
+      @include breakpoint($until: sm) {
+        border-radius: 0;
+        border-left-width: 0;
+        border-right-width: 0;
+      }
     }
   }
 
@@ -63,11 +70,14 @@
     padding-top: $legacy-card-padding-tight - 1px;
   }
 
-  &Card > .cobalt-Card__Section:first-of-type {
+  // first-of-class, source: https://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class
+  &Card
+    > .cobalt-Card__Section:not(.cobalt-Card__Section ~ .cobalt-Card__Section) {
     border-top-left-radius: $card-border-radius;
     border-top-right-radius: $card-border-radius;
   }
 
+  // No last-of-class hack found for now
   &Card > .cobalt-Card__Section:last-of-type {
     border-bottom-right-radius: $card-border-radius;
     border-bottom-left-radius: $card-border-radius;

package/styles/components/Flash/index.scss

@@ -13,10 +13,8 @@
     box-shadow: elevation(lg);
 
     &--info {
-      // TOFIX: there is no matching semantic color for this case
-      color: color(white);
-
-      background-color: color(graphite);
+      @include bg-color(info);
+      @include text-color(info);
     }
 
     &--success {

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

@@ -1,14 +1,6 @@
 @import "@reach/combobox/styles.css";
 
 .cobalt-Autocomplete {
-  $border-color: color(indigo);
-  $border-separator-popover-color: color(grey, light);
-  $selected-item-color: color(purple);
-  $selected-item-background-color: color(grey, lighter);
-  $selected-item-background-darken-color: darken(
-    $selected-item-background-color,
-    2
-  );
   $autocomplete-popover-zindex: 2147483647; //max z-index value
 
   @include form-field-container;
@@ -33,6 +25,7 @@
   }
 
   &__popover {
+    @include border(accent, 2);
     position: absolute;
 
     z-index: $autocomplete-popover-zindex;
@@ -47,14 +40,10 @@
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
 
-    border: 2px solid $border-color;
-
     background-color: color(white);
 
-    box-shadow: 0 2px 2px 0 rgba($border-color, 0.06),
-      0 6px 6px 0 rgba($border-color, 0.04),
-      0 8px 8px 0 rgba($border-color, 0.06),
-      inset 0 1px 0 0 $border-separator-popover-color;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.06), 0 6px 6px 0 rgba(0, 0, 0, 0.04),
+      0 8px 8px 0 rgba(0, 0, 0, 0.06);
 
     border-top-width: 0;
 
@@ -82,6 +71,8 @@
   }
 
   &__item {
+    @include bg-color(secondaryInteractive);
+
     width: 100%;
     display: flex;
     padding: 0;
@@ -91,19 +82,17 @@
 
   &__item:hover,
   &__item[aria-selected="true"] {
-    color: $selected-item-color;
+    @include text-color(accentAlt);
 
     cursor: pointer;
 
-    background-color: $selected-item-background-color;
-
     .cobalt-Icon {
-      fill: $selected-item-color;
+      @include semantic-color(accent, icon, fill);
     }
   }
 
   &__item[aria-selected="true"]:hover {
-    background-color: $selected-item-background-darken-color;
+    @include bg-color(accentAlt);
   }
 
   &__popover .cobalt-Autocomplete__item-icon {
@@ -133,12 +122,12 @@
   }
 
   &__item-wrapper--disabled {
-    color: color(grey, dark);
+    @include text-color(subdued);
 
     cursor: auto;
 
     .cobalt-Icon {
-      fill: color(grey, dark) !important;
+      fill: var(--c-icon-subdued) !important;
     }
   }
 

package/styles/components/Form/CheckablePill.scss

@@ -43,7 +43,6 @@
     line-height: $height - 2px * 2;
 
     border-radius: math.div($height, 2);
-    box-shadow: 0 2px 6px 0 rgba(#000, 0.12);
 
     transition: $animation-duration;
 
@@ -88,7 +87,7 @@
   &__Input:checked + #{ $self }__Label {
     @include bg-color(accentAlt);
     @include text-color(accentAlt);
-    border-color: transparent;
+    @include border(accentAlt, 2);
   }
 
   &--with-icon {

package/styles/components/Form/Checkmark.scss

@@ -5,17 +5,13 @@
     $checkbox-checkmark-size: 18px;
 
     @include text-color(base);
+    @include c-text-body-md;
 
     position: relative;
 
     margin-bottom: spacing(xs);
     display: block;
 
-    font-weight: 400;
-    font-family: font-family(base);
-    font-size: font-size(body);
-    line-height: line-height(body);
-
     &__Input {
       position: absolute;
 

package/styles/components/Form/Hint.scss

@@ -30,14 +30,5 @@
     &--error {
       @include text-color(error);
     }
-
-    a {
-      @include text-color(accentInteractive);
-      text-decoration: none;
-    }
-
-    a:hover {
-      text-decoration: underline;
-    }
   }
 }

package/styles/components/Form/RadioWithDetails.scss

@@ -9,7 +9,7 @@
   --visual-radio-size: 18px;
 
   .cobalt-radio-with-details__inner {
-    @include border(strongInteractive);
+    @include border(baseInteractive);
     @include text-color(base);
     @include bg-color(secondary);
     height: 100%;
@@ -49,7 +49,7 @@
   }
 
   .cobalt-radio-with-details__description {
-    @include c-text-body-md;
+    @include c-text-body-sm;
     @include text-color(subdued);
 
     transition: color 150ms ease-in-out;

package/styles/components/Helper/index.scss

@@ -3,9 +3,6 @@
   @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 {

package/styles/components/Icon/index.scss

@@ -24,13 +24,12 @@
   }
 
   &Icon--contained {
-    @include bg-color(secondary);
+    @include bg-color(neutralAlt);
     height: 40px;
     width: 40px;
     padding: math.div(40px - 24px, 2);
 
     border-radius: 50%;
-    box-shadow: elevation(base);
   }
 
   &Icon--size16 {

package/styles/components/Note/index.scss

@@ -9,6 +9,10 @@
     padding: spacing(sm);
 
     border-radius: border-radius(lg);
+
+    a {
+      color: inherit;
+    }
   }
 
   &Note--fullWidth {

package/styles/components/PhotoDropzone/index.scss

@@ -31,8 +31,7 @@
 }
 
 .cobalt-photo-dropzone--dragging {
-  // FIXME NEW COLORS: this background doesn't match any semantic color
-  background-color: #f6e5f5;
+  @include bg-color(accentAlt);
 
   transition: background-color 0.25s;
 

package/styles/components/TabBar/index.scss

@@ -41,7 +41,7 @@
   }
 
   &TabScroller--underlined:after {
-    @include fill-bg-color(base);
+    @include semantic-color(base, stroke, background);
     position: absolute;
     bottom: 0;