@atlaskit/onboarding 10.2.5 → 10.3.2

package/dist/es2019/components/theme.js

@@ -2,234 +2,108 @@ import * as colors from '@atlaskit/theme/colors';
 const spotlightTheme = {
   default: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
-      },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      default: `var(--ds-background-subtleNeutral-resting, ${colors.P400})`,
+      hover: `var(--ds-background-subtleNeutral-hover, ${colors.P200})`,
+      active: `var(--ds-background-subtleNeutral-pressed, ${colors.P500})`,
+      disabled: `var(--ds-background-disabled, ${colors.P400})`,
+      selected: `var(--ds-background-subtleNeutral-pressed, ${colors.R500})`,
+      focus: `var(--ds-background-subtleNeutral-resting, ${colors.P400})`
     },
     boxShadow: {
-      focus: {
-        light: `${colors.P100} 0 0 0 2px`,
-        dark: `${colors.P100} 0 0 0 2px`
-      }
+      focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: `var(--ds-text-onBold, ${colors.N0})`,
+      hover: `var(--ds-text-onBold, ${colors.N0})`,
+      active: `var(--ds-text-onBold, ${colors.N0})`,
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: `var(--ds-text-disabled, ${colors.N0})`,
+        dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: `var(--ds-text-onBold, ${colors.N0})`,
+      focus: `var(--ds-text-onBold, ${colors.N0})`
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   subtle: {
     background: {
-      default: {
-        light: 'none',
-        dark: 'none'
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: 'none',
-        dark: 'none'
-      },
+      default: 'none',
+      hover: `var(--ds-background-subtleNeutral-hover, ${colors.P200})`,
+      active: `var(--ds-background-subtleNeutral-pressed, ${colors.P500})`,
+      disabled: 'none',
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: `var(--ds-background-selected-hover, ${colors.N700})`,
+        dark: `var(--ds-background-selected-hover, ${colors.DN0})`
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: `var(--ds-background-selected-hover, ${colors.N700})`,
+        dark: `var(--ds-background-selected-hover, ${colors.DN0})`
       }
     },
     boxShadow: {
-      focus: {
-        light: `${colors.P100} 0 0 0 2px`,
-        dark: `${colors.P100} 0 0 0 2px`
-      }
+      focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      disabled: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: `var(--ds-text-onBold, ${colors.N0})`,
+      hover: `var(--ds-text-onBold, ${colors.N0})`,
+      active: `var(--ds-text-onBold, ${colors.N0})`,
+      disabled: `var(--ds-text-disabled, ${colors.N0})`,
+      selected: `var(--ds-text-onBold, ${colors.N0})`,
+      focus: `var(--ds-text-onBold, ${colors.N0})`
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   'subtle-link': {
     textDecoration: {
-      hover: {
-        light: `underline ${colors.P75}`,
-        dark: `underline ${colors.P75}`
-      }
+      hover: `underline ${`var(--ds-text-discovery, ${colors.P75})`}`
     },
     textDecorationLine: {
-      active: {
-        light: 'none',
-        dark: 'none'
-      }
+      active: 'none'
     },
     boxShadow: {
-      focus: {
-        light: `${colors.P100} 0 0 0 2px`,
-        dark: `${colors.P100} 0 0 0 2px`
-      }
+      focus: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.P75,
-        dark: colors.P75
-      },
-      active: {
-        light: colors.P100,
-        dark: colors.P100
-      },
-      disabled: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: `var(--ds-text-onBold, ${colors.N0})`,
+      hover: `var(--ds-text-onBold, ${colors.P75})`,
+      active: `var(--ds-text-onBold, ${colors.P100})`,
+      disabled: `var(--ds-text-discovery, ${colors.P500})`,
+      selected: `var(--ds-text-selected, ${colors.N0})`,
+      focus: `var(--ds-text-onBold, ${colors.N0})`
     }
   }
 };
 const modalTheme = {
   primary: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
+      default: `var(--ds-background-boldDiscovery-resting, ${colors.P400})`,
+      hover: `var(--ds-background-boldDiscovery-hover, ${colors.P200})`,
+      active: `var(--ds-background-boldDiscovery-pressed, ${colors.P500})`,
       disabled: {
-        light: colors.N30,
-        dark: colors.DN70
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: `var(--ds-background-disabled, ${colors.N30})`,
+        dark: `var(--ds-background-disabled, ${colors.DN70})`
       },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      selected: `var(--ds-background-selected-hover, ${colors.R500})`,
+      focus: `var(--ds-background-boldDiscovery-hover, ${colors.P400})`
     },
     boxShadow: {
       focus: {
-        light: `${colors.P100} 0 0 0 2px`,
-        dark: `${colors.P100} 0 0 0 2px`
+        light: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`,
+        dark: `0 0 0 2px ${`var(--ds-iconBorder-discovery, ${colors.P100})`}`
       }
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: `var(--ds-text-onBold, ${colors.N0})`,
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: `var(--ds-text-disabled, ${colors.N0})`,
+        dark: `var(--ds-text-disabled, ${colors.DN30})`
       },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: `var(--ds-text-selected, ${colors.N0})`,
+      focus: `var(--ds-text-onBold, ${colors.N0})`
     }
   }
 };

package/dist/es2019/styled/blanket.js

@@ -4,8 +4,8 @@ import { DN90A, N100A } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';
 const backgroundColor = themed({
-  light: N100A,
-  dark: DN90A
+  light: `var(--ds-background-blanket, ${N100A})`,
+  dark: `var(--ds-background-blanket, ${DN90A})`
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 

package/dist/es2019/styled/target.js

@@ -6,7 +6,7 @@ import { P300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-const baseShadow = `0 0 0 2px ${P300}`;
+const baseShadow = `var(--ds-overlay, ${`0 0 0 2px ${P300}`})`;
 const easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 const pulseKeyframes = keyframes({
   '0%, 33%': {
@@ -15,7 +15,9 @@ const pulseKeyframes = keyframes({
   '66%, 100%': {
     boxShadow: `${baseShadow}, 0 0 0 10px rgba(101, 84, 192, 0.01)`
   }
-});
+}); // This is needed for unit tests
+
+export const pulseKeyframesName = pulseKeyframes.name;
 const animationStyles = css({
   animation: `${pulseKeyframes} 3000ms ${easing} infinite`
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -30,9 +32,11 @@ const Base = ({
   bgColor,
   radius,
   style,
+  testId,
   ...props
 }) => jsx("div", _extends({
   css: baseStyles,
+  "data-testid": testId,
   style: { ...style,
     backgroundColor: bgColor,
     borderRadius: radius ? `${radius}px` : undefined
@@ -86,7 +90,10 @@ export const TargetOverlay = props => jsx("div", _extends({}, props, {
 
 export const Pulse = ({
   children,
+  pulse = true,
+  testId,
   ...props
 }) => jsx(Base, _extends({}, props, {
-  css: animationStyles
+  css: [pulse && animationStyles],
+  testId: testId
 }), children);

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.2.5",
+	"version": "10.3.2",
 	"sideEffects": false
 }

package/dist/esm/components/spotlight-card.js

@@ -68,10 +68,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
           return _theme(function () {
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread({
-                background: P300,
-                color: N0,
+                background: "var(--ds-background-boldDiscovery-resting, ".concat(P300, ")"),
+                color: "var(--ds-text-onBold, ".concat(N0, ")"),
                 width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
-                boxShadow: isFlat ? undefined : "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)
+                boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
               }, container)
             });
           }, {});

package/dist/esm/components/spotlight-dialog.js

@@ -23,7 +23,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.2.5";
+var packageVersion = "10.3.2";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);

package/dist/esm/components/theme.js

@@ -10,234 +10,108 @@ import * as colors from '@atlaskit/theme/colors';
 var spotlightTheme = {
   default: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
-      },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      default: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
+      selected: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")")
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   subtle: {
     background: {
-      default: {
-        light: 'none',
-        dark: 'none'
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: 'none',
-        dark: 'none'
-      },
+      default: 'none',
+      hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
+      disabled: 'none',
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
       }
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      disabled: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+      selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   'subtle-link': {
     textDecoration: {
-      hover: {
-        light: "underline ".concat(colors.P75),
-        dark: "underline ".concat(colors.P75)
-      }
+      hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
     },
     textDecorationLine: {
-      active: {
-        light: 'none',
-        dark: 'none'
-      }
+      active: 'none'
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.P75,
-        dark: colors.P75
-      },
-      active: {
-        light: colors.P100,
-        dark: colors.P100
-      },
-      disabled: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.P75, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.P100, ")"),
+      disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     }
   }
 };
 var modalTheme = {
   primary: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
+      default: "var(--ds-background-boldDiscovery-resting, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-boldDiscovery-pressed, ".concat(colors.P500, ")"),
       disabled: {
-        light: colors.N30,
-        dark: colors.DN70
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
+        dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
       },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
     },
     boxShadow: {
       focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
+        light: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")")),
+        dark: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
       }
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     }
   }
 };

package/dist/esm/styled/blanket.js

@@ -10,8 +10,8 @@ import { DN90A, N100A } from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
 import { layers } from '@atlaskit/theme/constants';
 var backgroundColor = themed({
-  light: N100A,
-  dark: DN90A
+  light: "var(--ds-background-blanket, ".concat(N100A, ")"),
+  dark: "var(--ds-background-blanket, ".concat(DN90A, ")")
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).