@atlaskit/app-provider - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

CHANGELOG.md

 # @atlaskit/app-provider
 
+## 0.2.0
+
+### Minor Changes
+
+- [#41931](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41931) [`5df5614a6b5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5df5614a6b5) - defaultTheme now applies default sub-themes when ommited.
+
 ## 0.1.0
@@ -4,0 +10,0 @@

dist/cjs/app-provider.js

@@ -15,7 +15,2 @@ "use strict";
 var InsideAppProviderContext = /*#__PURE__*/(0, _react.createContext)(false);
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
@@ -32,4 +27,3 @@ * __App provider__
     defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    defaultTheme = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme;
+    defaultTheme = _ref.defaultTheme;
   var isInsideAppProvider = (0, _react.useContext)(InsideAppProviderContext);
@@ -36,0 +30,0 @@ if (isInsideAppProvider) {

dist/cjs/theme-provider.js

@@ -23,2 +23,7 @@ "use strict";
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
 var ColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -101,3 +106,12 @@ var SetColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
     defaultColorMode = _ref.defaultColorMode,
-    defaultTheme = _ref.defaultTheme;
+    _ref$defaultTheme = _ref.defaultTheme,
+    _ref$defaultTheme2 = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme,
+    _ref$defaultTheme2$da = _ref$defaultTheme2.dark,
+    dark = _ref$defaultTheme2$da === void 0 ? 'dark' : _ref$defaultTheme2$da,
+    _ref$defaultTheme2$li = _ref$defaultTheme2.light,
+    light = _ref$defaultTheme2$li === void 0 ? 'light' : _ref$defaultTheme2$li,
+    _ref$defaultTheme2$sp = _ref$defaultTheme2.spacing,
+    spacing = _ref$defaultTheme2$sp === void 0 ? 'spacing' : _ref$defaultTheme2$sp,
+    typography = _ref$defaultTheme2.typography,
+    shape = _ref$defaultTheme2.shape;
   var _useState = (0, _react.useState)(defaultColorMode),
@@ -111,3 +125,9 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     setReconciledColorMode = _useState4[1];
-  var _useState5 = (0, _react.useState)(defaultTheme),
+  var _useState5 = (0, _react.useState)({
+      dark: dark,
+      light: light,
+      spacing: spacing,
+      typography: typography,
+      shape: shape
+    }),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
@@ -114,0 +134,0 @@ theme = _useState6[0],

dist/es2019/app-provider.js

 import React, { createContext, useContext } from 'react';
 import ThemeProvider from './theme-provider';
 const InsideAppProviderContext = /*#__PURE__*/createContext(false);
-const defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
@@ -19,3 +14,3 @@ * __App provider__
   defaultColorMode = 'light',
-  defaultTheme = defaultThemeSettings
+  defaultTheme
 }) {
@@ -22,0 +17,0 @@ const isInsideAppProvider = useContext(InsideAppProviderContext);

dist/es2019/theme-provider.js

 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { setGlobalTheme } from '@atlaskit/tokens';
+const defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
 const ColorModeContext = /*#__PURE__*/createContext(undefined);
@@ -81,7 +86,19 @@ const SetColorModeContext = /*#__PURE__*/createContext(undefined);
   defaultColorMode,
-  defaultTheme
+  defaultTheme: {
+    dark = 'dark',
+    light = 'light',
+    spacing = 'spacing',
+    typography,
+    shape
+  } = defaultThemeSettings
 }) {
   const [chosenColorMode, setChosenColorMode] = useState(defaultColorMode);
   const [reconciledColorMode, setReconciledColorMode] = useState(getReconciledColorMode(defaultColorMode));
-  const [theme, setTheme] = useState(defaultTheme);
+  const [theme, setTheme] = useState({
+    dark,
+    light,
+    spacing,
+    typography,
+    shape
+  });
   const setColorMode = useCallback(colorMode => {
@@ -88,0 +105,0 @@ setChosenColorMode(colorMode);

dist/esm/app-provider.js

 import React, { createContext, useContext } from 'react';
 import ThemeProvider from './theme-provider';
 var InsideAppProviderContext = /*#__PURE__*/createContext(false);
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
@@ -20,4 +15,3 @@ * __App provider__
     defaultColorMode = _ref$defaultColorMode === void 0 ? 'light' : _ref$defaultColorMode,
-    _ref$defaultTheme = _ref.defaultTheme,
-    defaultTheme = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme;
+    defaultTheme = _ref.defaultTheme;
   var isInsideAppProvider = useContext(InsideAppProviderContext);
@@ -24,0 +18,0 @@ if (isInsideAppProvider) {

dist/esm/theme-provider.js

@@ -8,2 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { setGlobalTheme } from '@atlaskit/tokens';
+var defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
 var ColorModeContext = /*#__PURE__*/createContext(undefined);
@@ -86,3 +91,12 @@ var SetColorModeContext = /*#__PURE__*/createContext(undefined);
     defaultColorMode = _ref.defaultColorMode,
-    defaultTheme = _ref.defaultTheme;
+    _ref$defaultTheme = _ref.defaultTheme,
+    _ref$defaultTheme2 = _ref$defaultTheme === void 0 ? defaultThemeSettings : _ref$defaultTheme,
+    _ref$defaultTheme2$da = _ref$defaultTheme2.dark,
+    dark = _ref$defaultTheme2$da === void 0 ? 'dark' : _ref$defaultTheme2$da,
+    _ref$defaultTheme2$li = _ref$defaultTheme2.light,
+    light = _ref$defaultTheme2$li === void 0 ? 'light' : _ref$defaultTheme2$li,
+    _ref$defaultTheme2$sp = _ref$defaultTheme2.spacing,
+    spacing = _ref$defaultTheme2$sp === void 0 ? 'spacing' : _ref$defaultTheme2$sp,
+    typography = _ref$defaultTheme2.typography,
+    shape = _ref$defaultTheme2.shape;
   var _useState = useState(defaultColorMode),
@@ -96,3 +110,9 @@ _useState2 = _slicedToArray(_useState, 2),
     setReconciledColorMode = _useState4[1];
-  var _useState5 = useState(defaultTheme),
+  var _useState5 = useState({
+      dark: dark,
+      light: light,
+      spacing: spacing,
+      typography: typography,
+      shape: shape
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
@@ -99,0 +119,0 @@ theme = _useState6[0],

dist/types-ts4.5/app-provider.d.ts

@@ -11,3 +11,3 @@ import React from 'react';
      */
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
     /**
@@ -14,0 +14,0 @@ * App content.

dist/types-ts4.5/theme-provider.d.ts

 import React from 'react';
 import { type ThemeState } from '@atlaskit/tokens';
-export type Theme = Omit<ThemeState, 'colorMode'>;
+export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 export type ColorMode = 'light' | 'dark' | 'auto';
@@ -32,3 +32,3 @@ export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
     defaultColorMode: ColorMode;
-    defaultTheme: Theme;
+    defaultTheme?: Partial<Theme>;
     children: React.ReactNode;
@@ -43,3 +43,3 @@ }
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

dist/types/app-provider.d.ts

@@ -11,3 +11,3 @@ import React from 'react';
      */
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
     /**
@@ -14,0 +14,0 @@ * App content.

dist/types/theme-provider.d.ts

 import React from 'react';
 import { type ThemeState } from '@atlaskit/tokens';
-export type Theme = Omit<ThemeState, 'colorMode'>;
+export type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 export type ColorMode = 'light' | 'dark' | 'auto';
@@ -32,3 +32,3 @@ export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
     defaultColorMode: ColorMode;
-    defaultTheme: Theme;
+    defaultTheme?: Partial<Theme>;
     children: React.ReactNode;
@@ -43,3 +43,3 @@ }
  */
-export declare function ThemeProvider({ children, defaultColorMode, defaultTheme, }: ThemeProviderProps): JSX.Element;
+export declare function ThemeProvider({ children, defaultColorMode, defaultTheme: { dark, light, spacing, typography, shape, }, }: ThemeProviderProps): JSX.Element;
 export default ThemeProvider;

package.json

 {
   "name": "@atlaskit/app-provider",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A top level provider for the Design System.",
@@ -41,3 +41,3 @@ "author": "Atlassian Pty Ltd",
   "dependencies": {
-    "@atlaskit/tokens": "^1.19.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
@@ -44,0 +44,0 @@ "bind-event-listener": "^2.1.1"

report.api.md

@@ -33,3 +33,3 @@ <!-- API Report Version: 2.3 -->
   defaultColorMode?: ColorMode;
-  defaultTheme?: Theme;
+  defaultTheme?: Partial<Theme>;
 }
@@ -44,3 +44,3 @@
 // @public (undocumented)
-type Theme = Omit<ThemeState, 'colorMode'>;
+type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 
@@ -47,0 +47,0 @@ // @public

tmp/api-report-tmp.d.ts

@@ -18,3 +18,3 @@ ## API Report File for "@atlaskit/app-provider"
     defaultColorMode?: ColorMode;
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
 }
@@ -29,3 +29,3 @@
 // @public (undocumented)
-type Theme = Omit<ThemeState, 'colorMode'>;
+type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 
@@ -32,0 +32,0 @@ // @public

No alert changes

Improved metrics

Total package byte prevSize

35067

increased by5.75%

Lines of code

755

increased by5.59%

Dependency changes

• Updated@atlaskit/tokens@^1.28.0