@atlaskit/tokens - npm Package Compare versions

Comparing version 0.10.1 to 0.10.2

CHANGELOG.md

 # @atlaskit/tokens
 
+## 0.10.2
+
+### Patch Changes
+
+- [`5b8212f08b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b8212f08b0) - The current theme can now be accessed and monitored for changes using new exports.
+
+  - `useThemeObserver` React hook
+  - `ThemeMutationObserver` Mutation Observer
+
 ## 0.10.1
@@ -4,0 +13,0 @@

dist/cjs/constants.js

@@ -6,5 +6,7 @@ "use strict";
 });
-exports.LONG_SHORT_MAPPING = exports.DEFAULT_THEME = exports.CSS_PREFIX = exports.ALLOWED_THEMES = void 0;
-var ALLOWED_THEMES = ['light', 'dark'];
-exports.ALLOWED_THEMES = ALLOWED_THEMES;
+exports.THEME_DATA_ATTRIBUTE = exports.THEMES = exports.LONG_SHORT_MAPPING = exports.DEFAULT_THEME = exports.CSS_PREFIX = void 0;
+var THEMES = ['light', 'dark'];
+exports.THEMES = THEMES;
+var THEME_DATA_ATTRIBUTE = 'data-theme';
+exports.THEME_DATA_ATTRIBUTE = THEME_DATA_ATTRIBUTE;
 var DEFAULT_THEME = 'light';
@@ -11,0 +13,0 @@ exports.DEFAULT_THEME = DEFAULT_THEME;

dist/cjs/get-token.js

@@ -15,3 +15,3 @@ "use strict";
 var name = "@atlaskit/tokens";
-var version = "0.10.1";
+var version = "0.10.2";
 
@@ -18,0 +18,0 @@ function token(path, fallback) {

dist/cjs/index.js

@@ -8,2 +8,8 @@ "use strict";
 });
+Object.defineProperty(exports, "ThemeMutationObserver", {
+  enumerable: true,
+  get: function get() {
+    return _themeChangeObserver.ThemeMutationObserver;
+  }
+});
 Object.defineProperty(exports, "setGlobalTheme", {
@@ -21,5 +27,13 @@ enumerable: true,
 });
+Object.defineProperty(exports, "useThemeObserver", {
+  enumerable: true,
+  get: function get() {
+    return _themeChangeObserver.useThemeObserver;
+  }
+});
 
 var _getToken = _interopRequireDefault(require("./get-token"));
 
-var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
+var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
+
+var _themeChangeObserver = require("./theme-change-observer");

dist/cjs/set-global-theme.js

@@ -8,7 +8,8 @@ "use strict";
 
+var _constants = require("./constants");
+
 var setGlobalTheme = function setGlobalTheme(theme) {
   if (process.env.NODE_ENV !== 'production') {
-    // check some pre-condition and throw if incorrect?
-    if (theme !== 'dark' && theme !== 'light') {
-      throw new Error("setGlobalTheme only accepts 'light' or 'dark' themes");
+    if (!_constants.THEMES.includes(theme)) {
+      throw new Error("setGlobalTheme only accepts themes: ".concat(_constants.THEMES.join(', ')));
     }
@@ -15,0 +16,0 @@ }

dist/cjs/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.1",
+	"version": "0.10.2",
 	"sideEffects": [
@@ -5,0 +5,0 @@ "**/*.css"

dist/es2019/constants.js

@@ -1,2 +0,3 @@
-export const ALLOWED_THEMES = ['light', 'dark'];
+export const THEMES = ['light', 'dark'];
+export const THEME_DATA_ATTRIBUTE = 'data-theme';
 export const DEFAULT_THEME = 'light';
@@ -3,0 +4,0 @@ export const CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code

dist/es2019/get-token.js

 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 const name = "@atlaskit/tokens";
-const version = "0.10.1";
+const version = "0.10.2";
 
@@ -6,0 +6,0 @@ function token(path, fallback) {

dist/es2019/index.js

 export { default as token } from './get-token';
-export { default as setGlobalTheme } from './set-global-theme';
+export { default as setGlobalTheme } from './set-global-theme';
+export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';

dist/es2019/set-global-theme.js

@@ -0,6 +1,7 @@
+import { THEMES } from './constants';
+
 const setGlobalTheme = theme => {
   if (process.env.NODE_ENV !== 'production') {
-    // check some pre-condition and throw if incorrect?
-    if (theme !== 'dark' && theme !== 'light') {
-      throw new Error("setGlobalTheme only accepts 'light' or 'dark' themes");
+    if (!THEMES.includes(theme)) {
+      throw new Error(`setGlobalTheme only accepts themes: ${THEMES.join(', ')}`);
     }
@@ -7,0 +8,0 @@ }

dist/es2019/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.1",
+	"version": "0.10.2",
 	"sideEffects": [
@@ -5,0 +5,0 @@ "**/*.css"

dist/esm/constants.js

@@ -1,2 +0,3 @@
-export var ALLOWED_THEMES = ['light', 'dark'];
+export var THEMES = ['light', 'dark'];
+export var THEME_DATA_ATTRIBUTE = 'data-theme';
 export var DEFAULT_THEME = 'light';
@@ -3,0 +4,0 @@ export var CSS_PREFIX = 'ds'; // Maps the longer theme name to a shorthand used in css/code

dist/esm/get-token.js

 import warnOnce from '@atlaskit/ds-lib/warn-once';
 import tokens from './artifacts/token-names';
 var name = "@atlaskit/tokens";
-var version = "0.10.1";
+var version = "0.10.2";
 
@@ -6,0 +6,0 @@ function token(path, fallback) {

dist/esm/index.js

 export { default as token } from './get-token';
-export { default as setGlobalTheme } from './set-global-theme';
+export { default as setGlobalTheme } from './set-global-theme';
+export { useThemeObserver, ThemeMutationObserver } from './theme-change-observer';

dist/esm/set-global-theme.js

@@ -0,6 +1,7 @@
+import { THEMES } from './constants';
+
 var setGlobalTheme = function setGlobalTheme(theme) {
   if (process.env.NODE_ENV !== 'production') {
-    // check some pre-condition and throw if incorrect?
-    if (theme !== 'dark' && theme !== 'light') {
-      throw new Error("setGlobalTheme only accepts 'light' or 'dark' themes");
+    if (!THEMES.includes(theme)) {
+      throw new Error("setGlobalTheme only accepts themes: ".concat(THEMES.join(', ')));
     }
@@ -7,0 +8,0 @@ }

dist/esm/version.json

 {
 	"name": "@atlaskit/tokens",
-	"version": "0.10.1",
+	"version": "0.10.2",
 	"sideEffects": [
@@ -5,0 +5,0 @@ "**/*.css"

dist/types/constants.d.ts

@@ -1,4 +0,5 @@
-export declare const ALLOWED_THEMES: string[];
+export declare const THEMES: readonly ["light", "dark"];
+export declare const THEME_DATA_ATTRIBUTE = "data-theme";
 export declare const DEFAULT_THEME = "light";
 export declare const CSS_PREFIX = "ds";
-export declare const LONG_SHORT_MAPPING: Record<string, string>;
+export declare const LONG_SHORT_MAPPING: Record<string, typeof THEMES[number]>;

dist/types/index.d.ts

 export { default as token } from './get-token';
 export { default as setGlobalTheme } from './set-global-theme';
 export type { CSSToken } from './artifacts/token-names';
+export type { Themes } from './types';
+export { useThemeObserver, ThemeMutationObserver, } from './theme-change-observer';

dist/types/set-global-theme.d.ts

@@ -1,2 +0,3 @@
-declare const setGlobalTheme: (theme: 'dark' | 'light') => void;
+import type { Themes } from './types';
+declare const setGlobalTheme: (theme: Themes) => void;
 export default setGlobalTheme;

dist/types/types.d.ts

 import { InternalTokenIds } from './artifacts/types-internal';
+import { THEMES } from './constants';
 export declare type Groups = 'raw' | 'paint' | 'shadow' | 'palette';
@@ -9,2 +10,3 @@ export declare type ActiveTokenState = 'active';
 export declare type PaletteCategory = 'blue' | 'purple' | 'red' | 'magenta' | 'orange' | 'yellow' | 'green' | 'teal' | 'light mode neutral' | 'dark mode neutral';
+export declare type Themes = typeof THEMES[number];
 export interface Token<TValue, Group extends Groups> {
@@ -11,0 +13,0 @@ value: TValue;

package.json

 {
   "name": "@atlaskit/tokens",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "author": "Atlassian Pty Ltd",
@@ -50,2 +50,5 @@ "description": "Design tokens are the single source of truth to name and store design decisions.",
   },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
   "devDependencies": {
@@ -73,2 +76,5 @@ "@af/codegen": "*",
     "@emotion/core": "^10.0.9",
+    "@testing-library/dom": "^7.7.3",
+    "@testing-library/react": "^8.0.1",
+    "@testing-library/react-hooks": "^1.0.4",
     "@types/chrome": "^0.0.171",
@@ -75,0 +81,0 @@ "copy-webpack-plugin": "^6.4.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

2205697

increased by0.45%

Number of package files

247

increased by1.65%

Lines of code

70671

increased by0.4%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

32

increased by10.34%

Number of low supply chain risk alerts

7

increased by75%

No dependency changes