@atlaskit/app-provider 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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
 
 ### Minor Changes

package/constellation/index/examples.mdx

@@ -2,14 +2,18 @@
 order: 0
 ---
 
-import AppProviderDefault from '../../examples/constellation/0-default';
-import AppProviderThemeSwitcher from '../../examples/constellation/1-theme-switcher';
+import defaultExample from '../../examples/constellation/0-default';
+import themeSwitcherExample from '../../examples/constellation/1-theme-switcher';
 
 ## Theming
 
 AppProvider sets up theming for an app, enabling [design tokens](/tokens/design-tokens) to be used.
 
-<Example Component={AppProviderDefault} packageName="@atlaskit/app-provider" />
+<Example
+  Component={defaultExample.example}
+  source={defaultExample.code}
+  packageName="@atlaskit/app-provider"
+/>
 
 ## Color mode and theme switching
 
@@ -18,6 +22,7 @@ The `useColorMode` hook can be used to get the active color mode. When the color
 The `useTheme` hook can be used to get the active themes. The `useSetTheme` hook can be used to change themes.
 
 <Example
-  Component={AppProviderThemeSwitcher}
+  Component={themeSwitcherExample.example}
+  source={themeSwitcherExample.code}
   packageName="@atlaskit/app-provider"
 />

package/dist/cjs/app-provider.js

@@ -12,11 +12,6 @@ var _themeProvider = _interopRequireDefault(require("./theme-provider"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var InsideAppProviderContext = /*#__PURE__*/(0, _react.createContext)(false);
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
  * __App provider__
  *
@@ -28,8 +23,7 @@ function AppProvider(_ref) {
   var children = _ref.children,
     _ref$defaultColorMode = _ref.defaultColorMode,
     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);
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');

package/dist/cjs/theme-provider.js

@@ -20,6 +20,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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);
 var SetColorModeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
 var ThemeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -97,7 +102,16 @@ function getReconciledColorMode(colorMode) {
 function ThemeProvider(_ref) {
   var children = _ref.children,
     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),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -106,7 +120,13 @@ function ThemeProvider(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     reconciledColorMode = _useState4[0],
     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),
     theme = _useState6[0],
     setTheme = _useState6[1];

package/dist/es2019/app-provider.js

@@ -1,11 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import ThemeProvider from './theme-provider';
 const InsideAppProviderContext = /*#__PURE__*/createContext(false);
-const defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
  * __App provider__
  *
@@ -16,7 +11,7 @@ const defaultThemeSettings = {
 export function AppProvider({
   children,
   defaultColorMode = 'light',
-  defaultTheme = defaultThemeSettings
+  defaultTheme
 }) {
   const isInsideAppProvider = useContext(InsideAppProviderContext);
   if (isInsideAppProvider) {

package/dist/es2019/theme-provider.js

@@ -1,6 +1,11 @@
 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);
 const SetColorModeContext = /*#__PURE__*/createContext(undefined);
 const ThemeContext = /*#__PURE__*/createContext(undefined);
@@ -78,11 +83,23 @@ function getReconciledColorMode(colorMode) {
 export function ThemeProvider({
   children,
   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 => {
     setChosenColorMode(colorMode);
     setReconciledColorMode(getReconciledColorMode(colorMode));

package/dist/esm/app-provider.js

@@ -1,11 +1,6 @@
 import React, { createContext, useContext } from 'react';
 import ThemeProvider from './theme-provider';
 var InsideAppProviderContext = /*#__PURE__*/createContext(false);
-var defaultThemeSettings = {
-  dark: 'dark',
-  light: 'light',
-  spacing: 'spacing'
-};
 /**
  * __App provider__
  *
@@ -17,8 +12,7 @@ export function AppProvider(_ref) {
   var children = _ref.children,
     _ref$defaultColorMode = _ref.defaultColorMode,
     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);
   if (isInsideAppProvider) {
     throw new Error('App provider should not be nested within another app provider.');

package/dist/esm/theme-provider.js

@@ -5,6 +5,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import { setGlobalTheme } from '@atlaskit/tokens';
+var defaultThemeSettings = {
+  dark: 'dark',
+  light: 'light',
+  spacing: 'spacing'
+};
 var ColorModeContext = /*#__PURE__*/createContext(undefined);
 var SetColorModeContext = /*#__PURE__*/createContext(undefined);
 var ThemeContext = /*#__PURE__*/createContext(undefined);
@@ -82,7 +87,16 @@ function getReconciledColorMode(colorMode) {
 export function ThemeProvider(_ref) {
   var children = _ref.children,
     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),
     _useState2 = _slicedToArray(_useState, 2),
     chosenColorMode = _useState2[0],
@@ -91,7 +105,13 @@ export function ThemeProvider(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     reconciledColorMode = _useState4[0],
     setReconciledColorMode = _useState4[1];
-  var _useState5 = useState(defaultTheme),
+  var _useState5 = useState({
+      dark: dark,
+      light: light,
+      spacing: spacing,
+      typography: typography,
+      shape: shape
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
     theme = _useState6[0],
     setTheme = _useState6[1];

package/dist/types/app-provider.d.ts

@@ -8,7 +8,7 @@ interface AppProviderProps {
     /**
      * Theme settings.
      */
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
     /**
      * App content.
      */

package/dist/types/theme-provider.d.ts

@@ -1,6 +1,6 @@
 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';
 export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 /**
@@ -29,7 +29,7 @@ export declare function useTheme(): Theme;
 export declare function useSetTheme(): (value: Partial<Theme>) => void;
 interface ThemeProviderProps {
     defaultColorMode: ColorMode;
-    defaultTheme: Theme;
+    defaultTheme?: Partial<Theme>;
     children: React.ReactNode;
 }
 /**
@@ -39,5 +39,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-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/dist/types-ts4.5/app-provider.d.ts

@@ -8,7 +8,7 @@ interface AppProviderProps {
     /**
      * Theme settings.
      */
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
     /**
      * App content.
      */

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

@@ -1,6 +1,6 @@
 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';
 export type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 /**
@@ -29,7 +29,7 @@ export declare function useTheme(): Theme;
 export declare function useSetTheme(): (value: Partial<Theme>) => void;
 interface ThemeProviderProps {
     defaultColorMode: ColorMode;
-    defaultTheme: Theme;
+    defaultTheme?: Partial<Theme>;
     children: React.ReactNode;
 }
 /**
@@ -39,5 +39,5 @@ interface ThemeProviderProps {
  *
  * @internal
  */
-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/app-provider",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A top level provider for the Design System.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,7 +38,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.19.0",
+    "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "bind-event-listener": "^2.1.1"
   },

package/report.api.md

@@ -30,7 +30,7 @@ export default AppProvider;
 interface AppProviderProps {
   children: React_2.ReactNode;
   defaultColorMode?: ColorMode;
-  defaultTheme?: Theme;
+  defaultTheme?: Partial<Theme>;
 }
 
 // @public (undocumented)
@@ -40,7 +40,7 @@ type ColorMode = 'auto' | 'dark' | 'light';
 type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 
 // @public (undocumented)
-type Theme = Omit<ThemeState, 'colorMode'>;
+type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 
 // @public
 export function useColorMode(): ReconciledColorMode;

package/tmp/api-report-tmp.d.ts

@@ -15,7 +15,7 @@ export default AppProvider;
 interface AppProviderProps {
     children: React_2.ReactNode;
     defaultColorMode?: ColorMode;
-    defaultTheme?: Theme;
+    defaultTheme?: Partial<Theme>;
 }
 
 // @public (undocumented)
@@ -25,7 +25,7 @@ type ColorMode = 'auto' | 'dark' | 'light';
 type ReconciledColorMode = Exclude<ColorMode, 'auto'>;
 
 // @public (undocumented)
-type Theme = Omit<ThemeState, 'colorMode'>;
+type Theme = Omit<ThemeState, 'colorMode' | 'contrastMode'>;
 
 // @public
 export function useColorMode(): ReconciledColorMode;