@atlaskit/progress-bar 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/progress-bar
 
+## 0.5.0
+
+### Minor Changes
+
+- [`53060e14621`](https://bitbucket.org/atlassian/atlassian-frontend/commits/53060e14621) - [ux] Instrumented `progress-bar` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/cjs/components/SuccessProgressBar.js

@@ -63,7 +63,7 @@ var SuccessProgressBar = /*#__PURE__*/function (_React$PureComponent) {
 
           return _objectSpread(_objectSpread({}, theme), {}, {
             bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: _colors.G300
+              background: "var(--ds-background-success-bold, ".concat(_colors.G300, ")")
             })
           });
         }

package/dist/cjs/components/TransparentProgressBar.js

@@ -51,10 +51,10 @@ var TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
           var theme = currentTheme(props);
           return _objectSpread(_objectSpread({}, theme), {}, {
             container: _objectSpread(_objectSpread({}, theme.container), {}, {
-              background: 'rgba(255, 255, 255, 0.5)'
+              background: "var(--ds-background-inverse, rgba(255, 255, 255, 0.5))"
             }),
             bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: 'white'
+              background: "var(--ds-surface, white)"
             })
           });
         }

package/dist/cjs/theme.js

@@ -22,7 +22,7 @@ var decreasingBarAnimation = (0, _core.keyframes)(_templateObject2 || (_template
 var Theme = (0, _components.createTheme)(function (props) {
   return {
     container: {
-      background: _colors.N40A,
+      background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")"),
       borderRadius: 3,
       height: 6,
       overflow: 'hidden',
@@ -34,7 +34,7 @@ var Theme = (0, _components.createTheme)(function (props) {
       display: 'block',
       height: 6,
       position: 'absolute',
-      background: _colors.N500
+      background: "var(--ds-background-neutral-bold, ".concat(_colors.N500, ")")
     },
     determinateBar: {
       transition: 'width 0.2s',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"sideEffects": false
 }

package/dist/es2019/components/SuccessProgressBar.js

@@ -19,7 +19,7 @@ export default class SuccessProgressBar extends React.PureComponent {
 
         return { ...theme,
           bar: { ...theme.bar,
-            background: G300
+            background: `var(--ds-background-success-bold, ${G300})`
           }
         };
       }

package/dist/es2019/components/TransparentProgressBar.js

@@ -9,10 +9,10 @@ export default class TransparentProgressBar extends React.PureComponent {
         const theme = currentTheme(props);
         return { ...theme,
           container: { ...theme.container,
-            background: 'rgba(255, 255, 255, 0.5)'
+            background: "var(--ds-background-inverse, rgba(255, 255, 255, 0.5))"
           },
           bar: { ...theme.bar,
-            background: 'white'
+            background: "var(--ds-surface, white)"
           }
         };
       }

package/dist/es2019/theme.js

@@ -11,7 +11,7 @@ const decreasingBarAnimation = keyframes`
 `;
 export const Theme = createTheme(props => ({
   container: {
-    background: N40A,
+    background: `var(--ds-background-neutral, ${N40A})`,
     borderRadius: 3,
     height: 6,
     overflow: 'hidden',
@@ -23,7 +23,7 @@ export const Theme = createTheme(props => ({
     display: 'block',
     height: 6,
     position: 'absolute',
-    background: N500
+    background: `var(--ds-background-neutral-bold, ${N500})`
   },
   determinateBar: {
     transition: 'width 0.2s',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"sideEffects": false
 }

package/dist/esm/components/SuccessProgressBar.js

@@ -47,7 +47,7 @@ var SuccessProgressBar = /*#__PURE__*/function (_React$PureComponent) {
 
           return _objectSpread(_objectSpread({}, theme), {}, {
             bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: G300
+              background: "var(--ds-background-success-bold, ".concat(G300, ")")
             })
           });
         }

package/dist/esm/components/TransparentProgressBar.js

@@ -36,10 +36,10 @@ var TransparentProgressBar = /*#__PURE__*/function (_React$PureComponent) {
           var theme = currentTheme(props);
           return _objectSpread(_objectSpread({}, theme), {}, {
             container: _objectSpread(_objectSpread({}, theme.container), {}, {
-              background: 'rgba(255, 255, 255, 0.5)'
+              background: "var(--ds-background-inverse, rgba(255, 255, 255, 0.5))"
             }),
             bar: _objectSpread(_objectSpread({}, theme.bar), {}, {
-              background: 'white'
+              background: "var(--ds-surface, white)"
             })
           });
         }

package/dist/esm/theme.js

@@ -10,7 +10,7 @@ var decreasingBarAnimation = keyframes(_templateObject2 || (_templateObject2 = _
 export var Theme = createTheme(function (props) {
   return {
     container: {
-      background: N40A,
+      background: "var(--ds-background-neutral, ".concat(N40A, ")"),
       borderRadius: 3,
       height: 6,
       overflow: 'hidden',
@@ -22,7 +22,7 @@ export var Theme = createTheme(function (props) {
       display: 'block',
       height: 6,
       position: 'absolute',
-      background: N500
+      background: "var(--ds-background-neutral-bold, ".concat(N500, ")")
     },
     determinateBar: {
       transition: 'width 0.2s',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -18,6 +18,9 @@ export interface CustomProgressBarProps {
     ariaLabel?: string;
 }
 export interface DefaultProgressBarProps extends CustomProgressBarProps {
-    /** The theme the component should use. */
+    /**
+     * The theme the component should use.
+     * NOTE: `theme` is being deprecated, and will be deleted after May 13 2022. If you depend on `theme`, we recommend migrating to one of its variants.
+     */
     theme?: ThemeProp<ThemeTokens, ThemeProps>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-bar",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A progress bar displays the status of a given process.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.7.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -32,7 +33,7 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.0.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -50,6 +51,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "theming": "tokens",
       "deprecation": "no-deprecated-imports",
       "styling": [
         "emotion"