@planningcenter/tapestry-react 2.5.1 → 2.6.0-rc.0

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -75,6 +75,8 @@ function mergeThemes(a, b) {
 }
 
 function ThemeProvider(_ref) {
+  var _ref2;
+
   var _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? emptyTheme : _ref$theme,
       children = _ref.children;
@@ -87,7 +89,7 @@ function ThemeProvider(_ref) {
 
   (0, _react.useLayoutEffect)(function () {
     var nextTheme = mergeThemes(_defaultTheme["default"], theme);
-    (0, _styles.setRootStyles)((0, _utils.objectToCSSProperties)('colors', nextTheme.colors));
+    (0, _styles.setRootStyles)(nextTheme.id, (0, _utils.objectToCSSProperties)('colors', nextTheme.colors));
 
     if (!(0, _utils.shallowEqual)(mergedTheme, nextTheme)) {
       setMergedTheme(nextTheme);
@@ -97,7 +99,7 @@ function ThemeProvider(_ref) {
     value: cache
   }, /*#__PURE__*/_react["default"].createElement(_react2.ThemeProvider, {
     theme: mergedTheme
-  }, children));
+  }, /*#__PURE__*/_react["default"].createElement("div", (_ref2 = {}, _ref2["" + (0, _styles.getThemeDataAttribute)(mergedTheme.id)] = true, _ref2), children)));
 }
 
 ThemeProvider.cache = cache;

package/dist/cjs/ThemeProvider/styles.js

@@ -1,23 +1,33 @@
 "use strict";
 
 exports.__esModule = true;
+exports.getThemeDataAttribute = getThemeDataAttribute;
 exports.styleReset = exports.defaultColorProperties = exports.setRootStyles = void 0;
 
 var _system = require("../system");
 
 var _utils = require("../utils");
 
-var getRootStyles = function getRootStyles(styles) {
+function getThemeDataAttribute(themeId) {
+  if (themeId) {
+    return "data-tapestry-react-theme-provider-" + themeId;
+  } else {
+    return 'data-tapestry-react-theme-provider';
+  }
+}
+
+var getRootStyles = function getRootStyles(id, styles) {
   var styleString = Object.keys(styles).map(function (key) {
     return key + ": " + styles[key];
   }).join('; ');
-  return ":root { " + styleString + " }";
+  return "[" + getThemeDataAttribute(id) + "] { " + styleString + " }";
 };
 
-var setRootStyles = function setRootStyles(styles) {
-  var styleElement = document.getElementById('tapestry-react-style');
+var setRootStyles = function setRootStyles(themeId, styles) {
+  ensureStyleElement(themeId);
+  var styleElement = document.getElementById("tapestry-react-style-" + themeId);
   var sheet = styleElement.sheet;
-  var styleString = getRootStyles(styles);
+  var styleString = getRootStyles(themeId, styles);
   sheet.deleteRule(0);
   sheet.insertRule(styleString, 0);
 };
@@ -25,16 +35,21 @@ var setRootStyles = function setRootStyles(styles) {
 exports.setRootStyles = setRootStyles;
 var defaultColorProperties = (0, _utils.objectToCSSProperties)('colors', (0, _system.flattenPalette)(_system.defaultTheme.colors));
 exports.defaultColorProperties = defaultColorProperties;
-var styleReset = ("\n" + getRootStyles(defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
 ).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
 
 exports.styleReset = styleReset;
 
-if (typeof window !== 'undefined' && !document.getElementById('tapestry-react-style')) {
-  var styleElement = document.createElement('style');
-  styleElement.id = 'tapestry-react-style';
-  styleElement.innerHTML = styleReset;
-  document.head.insertAdjacentElement('afterbegin', styleElement);
+function ensureStyleElement(themeId) {
+  // we use our own global style implementation in place of Emotion Global
+  // so we can have more control over when styles are injected since multiple
+  // Providers can be used on a page
+  if (typeof window !== 'undefined' && !document.getElementById("tapestry-react-style-" + themeId)) {
+    var styleElement = document.createElement('style');
+    styleElement.id = "tapestry-react-style-" + themeId;
+    styleElement.innerHTML = styleReset;
+    document.head.insertAdjacentElement('afterbegin', styleElement);
+  }
 }

package/dist/cjs/system/default-theme.js

@@ -23,6 +23,7 @@ var controlStyles = {
   checkedStroke: 'primary'
 };
 var defaultTheme = {
+  id: 'default',
   boxSizes: _boxSizes.boxSizes,
   colors: _colors.colors,
   icons: {

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -12,7 +12,7 @@ import { merge } from 'lodash';
 import defaultTheme from '../system/default-theme';
 import { flattenPalette } from '../system';
 import { objectToCSSProperties, shallowEqual } from '../utils';
-import { setRootStyles, styleReset } from './styles';
+import { getThemeDataAttribute, setRootStyles, styleReset } from './styles';
 var STORAGE_KEY = 'tapestry-react-theme';
 export var cache = createCache({
   key: 'tapestry-react'
@@ -52,6 +52,8 @@ function mergeThemes(a, b) {
 }
 
 export function ThemeProvider(_ref) {
+  var _ref2;
+
   var _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? emptyTheme : _ref$theme,
       children = _ref.children;
@@ -64,7 +66,7 @@ export function ThemeProvider(_ref) {
 
   useLayoutEffect(function () {
     var nextTheme = mergeThemes(defaultTheme, theme);
-    setRootStyles(objectToCSSProperties('colors', nextTheme.colors));
+    setRootStyles(nextTheme.id, objectToCSSProperties('colors', nextTheme.colors));
 
     if (!shallowEqual(mergedTheme, nextTheme)) {
       setMergedTheme(nextTheme);
@@ -74,7 +76,7 @@ export function ThemeProvider(_ref) {
     value: cache
   }, /*#__PURE__*/React.createElement(EmotionThemeProvider, {
     theme: mergedTheme
-  }, children));
+  }, /*#__PURE__*/React.createElement("div", (_ref2 = {}, _ref2["" + getThemeDataAttribute(mergedTheme.id)] = true, _ref2), children)));
 }
 ThemeProvider.cache = cache;
 ThemeProvider.setRootStyles = setRootStyles;

package/dist/esm/ThemeProvider/styles.js

@@ -1,29 +1,42 @@
 import { defaultTheme, flattenPalette } from '../system';
 import { objectToCSSProperties } from '../utils';
+export function getThemeDataAttribute(themeId) {
+  if (themeId) {
+    return "data-tapestry-react-theme-provider-" + themeId;
+  } else {
+    return 'data-tapestry-react-theme-provider';
+  }
+}
 
-var getRootStyles = function getRootStyles(styles) {
+var getRootStyles = function getRootStyles(id, styles) {
   var styleString = Object.keys(styles).map(function (key) {
     return key + ": " + styles[key];
   }).join('; ');
-  return ":root { " + styleString + " }";
+  return "[" + getThemeDataAttribute(id) + "] { " + styleString + " }";
 };
 
-export var setRootStyles = function setRootStyles(styles) {
-  var styleElement = document.getElementById('tapestry-react-style');
+export var setRootStyles = function setRootStyles(themeId, styles) {
+  ensureStyleElement(themeId);
+  var styleElement = document.getElementById("tapestry-react-style-" + themeId);
   var sheet = styleElement.sheet;
-  var styleString = getRootStyles(styles);
+  var styleString = getRootStyles(themeId, styles);
   sheet.deleteRule(0);
   sheet.insertRule(styleString, 0);
 };
 export var defaultColorProperties = objectToCSSProperties('colors', flattenPalette(defaultTheme.colors));
-export var styleReset = ("\n" + getRootStyles(defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
+export var styleReset = ("\n" + getRootStyles(null, defaultColorProperties) + "\n\n.tapestry-react-reset {\n  appearance: none;\n  box-sizing: border-box;\n  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n  font-weight: 400;\n  text-decoration: none;\n  flex: 0 0 auto;\n  min-width: 0px;\n  min-height: 0px;\n  padding: 0px;\n  margin: 0px;\n  border: 0px solid transparent;\n  background-color: transparent;\n  color: inherit;\n}\n\n.tapestry-react-reset::-moz-focus-inner {\n  padding: 0px;\n  border: 0px;\n}\n\n.tapestry-react-reset:focus:not(.focus-visible) {\n  outline: 0px;\n}\n" // minify string
 ).replace(/\n/g, '').replace(/\s\s+/g, ' '); // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
 
-if (typeof window !== 'undefined' && !document.getElementById('tapestry-react-style')) {
-  var styleElement = document.createElement('style');
-  styleElement.id = 'tapestry-react-style';
-  styleElement.innerHTML = styleReset;
-  document.head.insertAdjacentElement('afterbegin', styleElement);
+function ensureStyleElement(themeId) {
+  // we use our own global style implementation in place of Emotion Global
+  // so we can have more control over when styles are injected since multiple
+  // Providers can be used on a page
+  if (typeof window !== 'undefined' && !document.getElementById("tapestry-react-style-" + themeId)) {
+    var styleElement = document.createElement('style');
+    styleElement.id = "tapestry-react-style-" + themeId;
+    styleElement.innerHTML = styleReset;
+    document.head.insertAdjacentElement('afterbegin', styleElement);
+  }
 }

package/dist/esm/system/default-theme.js

@@ -1,5 +1,5 @@
-import * as general from "@planningcenter/icons/paths/general";
-import * as tapestry from "@planningcenter/icons/paths/tapestry";
+import * as general from '@planningcenter/icons/paths/general';
+import * as tapestry from '@planningcenter/icons/paths/tapestry';
 import { boxSizes } from './box-sizes';
 import { buttonThemes } from './button-themes';
 import { colors } from './colors';
@@ -11,6 +11,7 @@ var controlStyles = {
   checkedStroke: 'primary'
 };
 var defaultTheme = {
+  id: 'default',
   boxSizes: boxSizes,
   colors: colors,
   icons: {

package/dist/types/ThemeProvider/ThemeProvider.d.ts

@@ -13,7 +13,7 @@ export declare function ThemeProvider({ theme, children, }: {
 }): JSX.Element;
 export declare namespace ThemeProvider {
     var cache: import("@emotion/utils").EmotionCache;
-    var setRootStyles: (styles: any) => void;
+    var setRootStyles: (themeId: any, styles: any) => void;
     var styleReset: string;
     var themeInitializerScript: string;
     var themeStorage: {

package/dist/types/ThemeProvider/styles.d.ts

@@ -1,3 +1,4 @@
-export declare const setRootStyles: (styles: any) => void;
+export declare function getThemeDataAttribute(themeId: any): string;
+export declare const setRootStyles: (themeId: any, styles: any) => void;
 export declare const defaultColorProperties: any;
 export declare const styleReset: string;

package/dist/types/index.d.ts

@@ -184,6 +184,7 @@ export interface ButtonTheme {
 }
 
 export interface Theme {
+  id?: string
   boxSizes?: Record<keyof BoxSizes, BoxProps>
   breakpoints?: Partial<Breakpoints>
   button?: { themes?: { [key: string]: ButtonTheme } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.5.1",
+  "version": "2.6.0-rc.0",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/ThemeProvider/ThemeProvider.tsx

@@ -8,7 +8,7 @@ import defaultTheme from '../system/default-theme'
 import { flattenPalette } from '../system'
 import { Theme } from '../index'
 import { objectToCSSProperties, shallowEqual } from '../utils'
-import { setRootStyles, styleReset } from './styles'
+import { getThemeDataAttribute, setRootStyles, styleReset } from './styles'
 
 const STORAGE_KEY = 'tapestry-react-theme'
 
@@ -65,7 +65,10 @@ export function ThemeProvider({
   )
   useLayoutEffect(() => {
     const nextTheme = mergeThemes(defaultTheme, theme)
-    setRootStyles(objectToCSSProperties('colors', nextTheme.colors))
+    setRootStyles(
+      nextTheme.id,
+      objectToCSSProperties('colors', nextTheme.colors)
+    )
     if (!shallowEqual(mergedTheme, nextTheme)) {
       setMergedTheme(nextTheme)
     }
@@ -73,7 +76,9 @@ export function ThemeProvider({
   return (
     <CacheProvider value={cache}>
       <EmotionThemeProvider theme={mergedTheme}>
-        {children}
+        <div {...{ [`${getThemeDataAttribute(mergedTheme.id)}`]: true }}>
+          {children}
+        </div>
       </EmotionThemeProvider>
     </CacheProvider>
   )

package/src/ThemeProvider/styles.ts

@@ -1,17 +1,30 @@
 import { defaultTheme, flattenPalette } from '../system'
 import { objectToCSSProperties } from '../utils'
 
-const getRootStyles = (styles) => {
+export function getThemeDataAttribute(themeId) {
+  if (themeId) {
+    return `data-tapestry-react-theme-provider-${themeId}`
+  } else {
+    return 'data-tapestry-react-theme-provider'
+  }
+}
+
+const getRootStyles = (id, styles) => {
   const styleString = Object.keys(styles)
     .map((key) => `${key}: ${styles[key]}`)
     .join('; ')
-  return `:root { ${styleString} }`
+
+  return `[${getThemeDataAttribute(id)}] { ${styleString} }`
 }
 
-export const setRootStyles = (styles) => {
-  const styleElement = <HTMLStyleElement>document.getElementById('tapestry-react-style')
+export const setRootStyles = (themeId, styles) => {
+  ensureStyleElement(themeId)
+  const styleElement = <HTMLStyleElement>(
+    document.getElementById(`tapestry-react-style-${themeId}`)
+  )
+
   const sheet = <CSSStyleSheet>styleElement.sheet
-  const styleString = getRootStyles(styles)
+  const styleString = getRootStyles(themeId, styles)
   sheet.deleteRule(0)
   sheet.insertRule(styleString, 0)
 }
@@ -22,7 +35,7 @@ export const defaultColorProperties = objectToCSSProperties(
 )
 
 export const styleReset = `
-${getRootStyles(defaultColorProperties)}
+${getRootStyles(null, defaultColorProperties)}
 
 .tapestry-react-reset {
   appearance: none;
@@ -56,9 +69,17 @@ ${getRootStyles(defaultColorProperties)}
 // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
-if (typeof window !== 'undefined' && !document.getElementById('tapestry-react-style')) {
-  const styleElement = document.createElement('style')
-  styleElement.id = 'tapestry-react-style'
-  styleElement.innerHTML = styleReset
-  document.head.insertAdjacentElement('afterbegin', styleElement)
+function ensureStyleElement(themeId) {
+  // we use our own global style implementation in place of Emotion Global
+  // so we can have more control over when styles are injected since multiple
+  // Providers can be used on a page
+  if (
+    typeof window !== 'undefined' &&
+    !document.getElementById(`tapestry-react-style-${themeId}`)
+  ) {
+    const styleElement = document.createElement('style')
+    styleElement.id = `tapestry-react-style-${themeId}`
+    styleElement.innerHTML = styleReset
+    document.head.insertAdjacentElement('afterbegin', styleElement)
+  }
 }

package/src/index.d.ts

@@ -184,6 +184,7 @@ export interface ButtonTheme {
 }
 
 export interface Theme {
+  id?: string
   boxSizes?: Record<keyof BoxSizes, BoxProps>
   breakpoints?: Partial<Breakpoints>
   button?: { themes?: { [key: string]: ButtonTheme } }

package/src/system/default-theme.ts

@@ -1,5 +1,5 @@
-import * as general from "@planningcenter/icons/paths/general"
-import * as tapestry from "@planningcenter/icons/paths/tapestry"
+import * as general from '@planningcenter/icons/paths/general'
+import * as tapestry from '@planningcenter/icons/paths/tapestry'
 
 import { Theme } from '../index'
 
@@ -16,6 +16,7 @@ const controlStyles = {
 }
 
 const defaultTheme: Theme = {
+  id: 'default',
   boxSizes,
   colors,
   icons: {