@atlaskit/spinner - npm Package Compare versions

Comparing version 15.0.11 to 15.1.0

CHANGELOG.md

 # @atlaskit/spinner
 
+## 15.1.0
+
+### Minor Changes
+
+- [`97d5fe7100c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/97d5fe7100c) - Instrumented Spinner with the new theming package, `@atlaskit/tokens`.
+
+  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
+
 ## 15.0.11
@@ -4,0 +18,0 @@

dist/cjs/spinner.js

@@ -20,2 +20,4 @@ "use strict";
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants = require("./constants");
@@ -37,7 +39,6 @@
   if (mode === 'light') {
-    return appearance === 'inherit' ? _colors.N500 : _colors.N0;
-  } // Dark mode: colours provided by Jake Miller
+    return appearance === 'inherit' ? (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500) : (0, _tokens.token)('color.text.onBold', _colors.N0);
+  }
 
-
-  return appearance === 'inherit' ? _colors.DN900 : _colors.DN500;
+  return appearance === 'inherit' ? (0, _tokens.token)('color.text.mediumEmphasis', _colors.DN900) : (0, _tokens.token)('color.text.onBold', _colors.DN500);
 }
@@ -75,3 +76,3 @@
       ref: ref,
-      css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n                  /* We are going to animate this in */\n                  opacity: 0;\n\n                  animation: ", " 1s ease-in-out;\n                  /* When the animation completes, stay at the last frame of the animation */\n                  animation-fill-mode: forwards;\n                  animation-delay: ", "ms;\n                  fill: none;\n                  stroke: ", ";\n                  stroke-width: 1.5;\n                  stroke-linecap: round;\n                  stroke-dasharray: 60;\n                  stroke-dashoffset: inherit;\n                  @media screen and (-ms-high-contrast: white-on-black) {\n                    filter: grayscale(100%);\n                    stroke: ", ";\n                  }\n                  @media screen and (-ms-high-contrast: black-on-white) {\n                    filter: grayscale(100%);\n                    stroke: #000000;\n                  }\n                "])), loadIn, delay, strokeColor, _colors.N0)
+      css: (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n                  /* We are going to animate this in */\n                  opacity: 0;\n                  animation: ", " 1s ease-in-out;\n                  /* When the animation completes, stay at the last frame of the animation */\n                  animation-fill-mode: forwards;\n                  animation-delay: ", "ms;\n                  fill: none;\n                  stroke: ", ";\n                  stroke-width: 1.5;\n                  stroke-linecap: round;\n                  stroke-dasharray: 60;\n                  stroke-dashoffset: inherit;\n                  @media screen and (forced-colors: active) {\n                    filter: grayscale(100%);\n                    stroke: CanvasText;\n                  }\n                "])), loadIn, delay, strokeColor)
     }, (0, _core.jsx)("circle", {
@@ -78,0 +79,0 @@ cx: "8",

dist/cjs/version.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "15.0.11",
+	"version": "15.1.0",
 	"sideEffects": false
 }

dist/es2019/spinner.js

@@ -6,2 +6,3 @@ /** @jsx jsx */
 import GlobalTheme from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 import { presetSizes } from './constants';
@@ -33,7 +34,6 @@ const rotate = keyframes`
   if (mode === 'light') {
-    return appearance === 'inherit' ? N500 : N0;
-  } // Dark mode: colours provided by Jake Miller
+    return appearance === 'inherit' ? token('color.text.mediumEmphasis', N500) : token('color.text.onBold', N0);
+  }
 
-
-  return appearance === 'inherit' ? DN900 : DN500;
+  return appearance === 'inherit' ? token('color.text.mediumEmphasis', DN900) : token('color.text.onBold', DN500);
 }
@@ -82,3 +82,2 @@
                   opacity: 0;
-
                   animation: ${loadIn} 1s ease-in-out;
@@ -94,10 +93,6 @@ /* When the animation completes, stay at the last frame of the animation */
                   stroke-dashoffset: inherit;
-                  @media screen and (-ms-high-contrast: white-on-black) {
+                  @media screen and (forced-colors: active) {
                     filter: grayscale(100%);
-                    stroke: ${N0};
+                    stroke: CanvasText;
                   }
-                  @media screen and (-ms-high-contrast: black-on-white) {
-                    filter: grayscale(100%);
-                    stroke: #000000;
-                  }
                 `
@@ -104,0 +99,0 @@ }, jsx("circle", {

dist/es2019/version.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "15.0.11",
+	"version": "15.1.0",
 	"sideEffects": false
 }

dist/esm/spinner.js

@@ -10,2 +10,3 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import GlobalTheme from '@atlaskit/theme/components';
+import { token } from '@atlaskit/tokens';
 import { presetSizes } from './constants';
@@ -24,7 +25,6 @@ var rotate = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  to { transform: rotate(360deg); }\n"]))); // There are three parts to the load in animation:
   if (mode === 'light') {
-    return appearance === 'inherit' ? N500 : N0;
-  } // Dark mode: colours provided by Jake Miller
+    return appearance === 'inherit' ? token('color.text.mediumEmphasis', N500) : token('color.text.onBold', N0);
+  }
 
-
-  return appearance === 'inherit' ? DN900 : DN500;
+  return appearance === 'inherit' ? token('color.text.mediumEmphasis', DN900) : token('color.text.onBold', DN500);
 }
@@ -62,3 +62,3 @@
       ref: ref,
-      css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  /* We are going to animate this in */\n                  opacity: 0;\n\n                  animation: ", " 1s ease-in-out;\n                  /* When the animation completes, stay at the last frame of the animation */\n                  animation-fill-mode: forwards;\n                  animation-delay: ", "ms;\n                  fill: none;\n                  stroke: ", ";\n                  stroke-width: 1.5;\n                  stroke-linecap: round;\n                  stroke-dasharray: 60;\n                  stroke-dashoffset: inherit;\n                  @media screen and (-ms-high-contrast: white-on-black) {\n                    filter: grayscale(100%);\n                    stroke: ", ";\n                  }\n                  @media screen and (-ms-high-contrast: black-on-white) {\n                    filter: grayscale(100%);\n                    stroke: #000000;\n                  }\n                "])), loadIn, delay, strokeColor, N0)
+      css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  /* We are going to animate this in */\n                  opacity: 0;\n                  animation: ", " 1s ease-in-out;\n                  /* When the animation completes, stay at the last frame of the animation */\n                  animation-fill-mode: forwards;\n                  animation-delay: ", "ms;\n                  fill: none;\n                  stroke: ", ";\n                  stroke-width: 1.5;\n                  stroke-linecap: round;\n                  stroke-dasharray: 60;\n                  stroke-dashoffset: inherit;\n                  @media screen and (forced-colors: active) {\n                    filter: grayscale(100%);\n                    stroke: CanvasText;\n                  }\n                "])), loadIn, delay, strokeColor)
     }, jsx("circle", {
@@ -65,0 +65,0 @@ cx: "8",

dist/esm/version.json

 {
 	"name": "@atlaskit/spinner",
-	"version": "15.0.11",
+	"version": "15.1.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/spinner",
-  "version": "15.0.11",
+  "version": "15.1.0",
   "description": "A spinner is an animated spinning icon that lets users know content is being loaded.",
@@ -27,3 +27,4 @@ "publishConfig": {
   "dependencies": {
-    "@atlaskit/theme": "^11.3.0",
+    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/tokens": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -36,8 +37,10 @@ "@emotion/core": "^10.0.9"
   "devDependencies": {
-    "@atlaskit/avatar": "^20.3.0",
+    "@atlaskit/avatar": "^20.4.0",
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^15.1.0",
+    "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "^10.0.0",
+    "@atlaskit/icon": "^21.7.0",
+    "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/motion": "^1.0.0",
+    "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/select": "^15.0.0",
@@ -61,14 +64,6 @@ "@atlaskit/ssr": "*",
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "deprecation": "no-deprecated-imports"
     }
@@ -75,0 +70,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

66968

increased by0.56%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

20

increased by11.11%

Lines of code

687

decreased by-0.29%

Dependency changes

• + Added@atlaskit/tokens@^0.1.0

• + Added@atlaskit/tokens@0.1.1(transitive)

• Updated@atlaskit/theme@^11.4.0