@jobber/components 9.15.3 → 9.15.4

package/dist/FormFieldWrapper-cjs.js

@@ -33,7 +33,7 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, disab
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
         return null;
-    return (React.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button.Button, { ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize, disabled: disabled })) : (React.createElement(Icon.Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
+    return (React.createElement("div", { className: affixIconClass }, onClick ? (React.createElement(Button.Button, { ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize, disabled: disabled })) : (React.createElement(Icon.Icon, { name: icon, size: iconSize, color: "iconSecondary" }))));
 }
 
 function FormFieldDescription({ id, description, visible = true, }) {

package/dist/FormFieldWrapper-es.js

@@ -31,7 +31,7 @@ function AffixIcon({ icon, onClick, ariaLabel, variation = "prefix", size, disab
     const iconSize = size === "small" ? "small" : "base";
     if (!icon)
         return null;
-    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(Button, { ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize, disabled: disabled })) : (React__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" }))));
+    return (React__default.createElement("div", { className: affixIconClass }, onClick ? (React__default.createElement(Button, { ariaLabel: ariaLabel, icon: icon, onClick: onClick, variation: "subtle", type: "tertiary", size: iconSize, disabled: disabled })) : (React__default.createElement(Icon, { name: icon, size: iconSize, color: "iconSecondary" }))));
 }
 
 function FormFieldDescription({ id, description, visible = true, }) {

package/dist/InputNumber-cjs.js

@@ -371,7 +371,7 @@ function AffixIconContent({ icon, size, onClick, ariaLabel, }) {
     if (onClick) {
         return (React.createElement(Button.Button, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Action"), icon: icon, onClick: onClick, size: iconSize, type: "tertiary", variation: "subtle" }));
     }
-    return React.createElement(Icon.Icon, { name: icon, size: iconSize, color: "greyBlue" });
+    return React.createElement(Icon.Icon, { name: icon, size: iconSize, color: "iconSecondary" });
 }
 function AffixLabelSlot({ variation, label }) {
     return (React.createElement("div", { className: classnames(styles.affixLabel, variation === "prefix" && styles.prefix, variation === "suffix" && styles.suffix) }, label));

package/dist/InputNumber-es.js

@@ -369,7 +369,7 @@ function AffixIconContent({ icon, size, onClick, ariaLabel, }) {
     if (onClick) {
         return (React__default.createElement(Button, { ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Action"), icon: icon, onClick: onClick, size: iconSize, type: "tertiary", variation: "subtle" }));
     }
-    return React__default.createElement(Icon, { name: icon, size: iconSize, color: "greyBlue" });
+    return React__default.createElement(Icon, { name: icon, size: iconSize, color: "iconSecondary" });
 }
 function AffixLabelSlot({ variation, label }) {
     return (React__default.createElement("div", { className: classnames(styles.affixLabel, variation === "prefix" && styles.prefix, variation === "suffix" && styles.suffix) }, label));

package/dist/SelectPrimitive-cjs.js

@@ -19,7 +19,7 @@ const SELECT_OFFSET = 6;
 function TriggerChevron() {
     return (React.createElement("span", { "aria-hidden": "true", className: styles.iconWrapper },
         React.createElement("span", { className: styles.iconRotate },
-            React.createElement(Icon.Icon, { color: "greyBlue", name: "arrowDown", size: "base" }))));
+            React.createElement(Icon.Icon, { color: "iconSecondary", name: "arrowDown", size: "base" }))));
 }
 function SelectPrimitiveFieldTrigger(_a) {
     var { valueSlot, className } = _a, props = tslib_es6.__rest(_a, ["valueSlot", "className"]);

package/dist/SelectPrimitive-es.js

@@ -17,7 +17,7 @@ const SELECT_OFFSET = 6;
 function TriggerChevron() {
     return (React__default.createElement("span", { "aria-hidden": "true", className: styles.iconWrapper },
         React__default.createElement("span", { className: styles.iconRotate },
-            React__default.createElement(Icon, { color: "greyBlue", name: "arrowDown", size: "base" }))));
+            React__default.createElement(Icon, { color: "iconSecondary", name: "arrowDown", size: "base" }))));
 }
 function SelectPrimitiveFieldTrigger(_a) {
     var { valueSlot, className } = _a, props = __rest(_a, ["valueSlot", "className"]);

package/dist/docs/List/List.md

@@ -103,7 +103,7 @@ const sectionedListItems: ListItemProps[] = [
   {
     id: 2,
     icon: "checkmark",
-    iconColor: "green",
+    iconColor: "success",
     title: "Josh Elford completed a visit",
     content: "Annual Maintenance",
     caption: "2 hours ago",

package/dist/showToast-cjs.js

@@ -62,11 +62,11 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
     function getIcon() {
         switch (variation) {
             case "info":
-                return { name: "knot", color: "lightBlue" };
+                return { name: "info", color: "informative" };
             case "error":
-                return { name: "alert", color: "red" };
+                return { name: "alert", color: "critical" };
             default:
-                return { name: "checkmark", color: "green" };
+                return { name: "checkmark", color: "success" };
         }
     }
 }

package/dist/showToast-es.js

@@ -60,11 +60,11 @@ function Toast({ message, variation = "success", action, actionLabel, }) {
     function getIcon() {
         switch (variation) {
             case "info":
-                return { name: "knot", color: "lightBlue" };
+                return { name: "info", color: "informative" };
             case "error":
-                return { name: "alert", color: "red" };
+                return { name: "alert", color: "critical" };
             default:
-                return { name: "checkmark", color: "green" };
+                return { name: "checkmark", color: "success" };
         }
     }
 }

package/dist/styles.css

@@ -1535,7 +1535,7 @@
   --public-field--bottom-left-radius: var(--radius-base);
   --public-field--bottom-right-radius: var(--radius-base);
 
-  --field--placeholder-color: var(--color-base-blue--600);
+  --field--placeholder-color: var(--color-text--secondary);
   --field--value-color: var(--color-heading);
   --field--border-color: var(--color-border--interactive);
 
@@ -1848,7 +1848,7 @@
   padding-left: var(--field--padding-left);
   padding-right: var(--field--padding-right);
   overflow: hidden;
-  color: hsl(197, 15%, 43%);
+  color: hsl(197, 21%, 36%);
   color: var(--field--placeholder-color);
   line-height: var(--field--value-lineHeight);
   text-align: var(--field--textAlign);
@@ -1865,7 +1865,7 @@
   display: block;
   margin-bottom: 4px;
   margin-bottom: var(--space-smaller);
-  color: hsl(197, 15%, 43%);
+  color: hsl(197, 21%, 36%);
   color: var(--field--placeholder-color);
   line-height: 1.25;
   line-height: var(--typography--lineHeight-base);
@@ -2505,7 +2505,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border: solid hsl(197, 21%, 36%);
   border: solid var(--color-inactive);
   border-top-color: rgba(255, 255, 255, 1);
-  border-top-color: var(--color-white);
+  border-top-color: var(--color-base-white);
   border-width: calc(8px * 0.75);
   border-width: calc(var(--space-small) * 0.75);
   border-radius: 100%;
@@ -3168,7 +3168,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
 
 .-PlHaWx00Hw- {
-  --card--accent-color: var(--color-grey);
+  --card--accent-color: var(--color-base-grey--400);
   --card--base-padding: var(--space-base);
   --card--border: var(--border-base) solid var(--color-border);
 
@@ -13620,9 +13620,8 @@ progress.w8NAw4ZMB6g-[value]::-webkit-progress-value {
   left: 0;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: hsl(198, 96%, 9%);
-  background-color: var(--color-blue--dark);
-  opacity: 0.3;
+  background-color: rgba(0, 0, 0, 0.32);
+  background-color: var(--color-overlay);
   mix-blend-mode: multiply;
 }
 
@@ -14364,8 +14363,8 @@ progress.w8NAw4ZMB6g-[value]::-webkit-progress-value {
   padding-bottom: var(--field--padding-bottom);
   padding-left: var(--field--padding-left);
   padding-right: var(--field--padding-right);
-  color: hsl(0, 0%, 72%);
-  color: var(--color-grey);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
   font-family: inherit;
   font-size: inherit;
   line-height: var(--field--value-lineHeight);
@@ -16699,13 +16698,8 @@ ul.LfIIg9bwrhQ- {
    the reverse color scheme of Toast */
 
 .ibhpdUt9YLo- * path {
-  fill: hsl(197, 21%, 36%) !important;
-  fill: var(--color-text--secondary) !important;
-}
-
-.ibhpdUt9YLo-:hover * path {
-  fill: hsl(197, 15%, 43%) !important;
-  fill: var(--color-greyBlue) !important;
+  fill: hsl(198, 12%, 57%) !important;
+  fill: var(--color-icon--secondary) !important;
 }
 
 @-webkit-keyframes _5Wy5Wra20Vk- {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "9.15.3",
+  "version": "9.15.4",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -496,7 +496,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.118.0",
+    "@jobber/design": "0.118.1",
     "@jobber/hooks": "2.21.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -548,5 +548,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "3b0b1abca8a868037f4b189dbbf663c10c0c3b7b"
+  "gitHead": "1f2ce0a2e21335640daf4d7fa36cc2630e7858c7"
 }