components-test-pb 0.1.8 → 0.2.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { assertSlots, slot, useARIAButtonProps } from './utilities';
-export { tokens, defaultTheme, themeToCSS } from './theme';
+export { tokens, defaultTheme, themeToCSS, insertTheme } from './theme';
 export type { Theme } from './theme';
 export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './components';
 export type { ButtonSlots, ButtonAppearance, ButtonShape, ButtonSize, ButtonProps, ButtonState, } from './components';

package/dist/index.js

@@ -1,3 +1,3 @@
 export { assertSlots, slot, useARIAButtonProps } from './utilities';
-export { tokens, defaultTheme, themeToCSS } from './theme';
+export { tokens, defaultTheme, themeToCSS, insertTheme } from './theme';
 export { Button, useButton, renderButton, useButtonStyles, buttonClassNames, } from './components';

package/dist/theme/index.d.ts

@@ -1,4 +1,4 @@
 export { tokens } from './tokens';
 export { defaultTheme } from './defaultTheme';
-export { themeToCSS } from './themeToCSS';
+export { themeToCSS, insertTheme } from './themeToCSS';
 export type { Theme } from './types';

package/dist/theme/index.js

@@ -1,3 +1,3 @@
 export { tokens } from './tokens';
 export { defaultTheme } from './defaultTheme';
-export { themeToCSS } from './themeToCSS';
+export { themeToCSS, insertTheme } from './themeToCSS';

package/dist/theme/themeToCSS.d.ts

@@ -1,2 +1,3 @@
 import type { Theme } from './types';
 export declare function themeToCSS(theme: Theme): string;
+export declare function insertTheme(theme: Theme): void;

package/dist/theme/themeToCSS.js

@@ -1,5 +1,21 @@
+let themeStyleElement = null;
 export function themeToCSS(theme) {
     return Object.keys(theme)
         .map((key) => `--${key}: ${theme[key]};`)
         .join(' ');
 }
+export function insertTheme(theme) {
+    if (!themeStyleElement) {
+        themeStyleElement = document.createElement('style');
+        themeStyleElement.setAttribute('data-theme', 'default');
+        document.head.appendChild(themeStyleElement);
+    }
+    const rule = `:root { ${themeToCSS(theme)} }`;
+    const sheet = themeStyleElement.sheet;
+    if (sheet) {
+        while (sheet.cssRules.length > 0) {
+            sheet.deleteRule(0);
+        }
+        sheet.insertRule(rule, 0);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "components-test-pb",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/index.ts

@@ -1,6 +1,6 @@
 export { assertSlots, slot, useARIAButtonProps } from './utilities';
 
-export { tokens, defaultTheme, themeToCSS } from './theme';
+export { tokens, defaultTheme, themeToCSS, insertTheme } from './theme';
 export type { Theme } from './theme';
 
 export {

package/src/theme/index.ts

@@ -1,4 +1,4 @@
 export { tokens } from './tokens';
 export { defaultTheme } from './defaultTheme';
-export { themeToCSS } from './themeToCSS';
+export { themeToCSS, insertTheme } from './themeToCSS';
 export type { Theme } from './types';

package/src/theme/themeToCSS.ts

@@ -1,7 +1,27 @@
 import type { Theme } from './types';
 
+let themeStyleElement: HTMLStyleElement | null = null;
+
 export function themeToCSS(theme: Theme): string {
     return (Object.keys(theme) as (keyof Theme)[])
         .map((key) => `--${key}: ${theme[key]};`)
         .join(' ');
 }
+
+export function insertTheme(theme: Theme): void {
+    if (!themeStyleElement) {
+        themeStyleElement = document.createElement('style');
+        themeStyleElement.setAttribute('data-theme', 'default');
+        document.head.appendChild(themeStyleElement);
+    }
+
+    const rule = `:root { ${themeToCSS(theme)} }`;
+
+    const sheet = themeStyleElement.sheet;
+    if (sheet) {
+        while (sheet.cssRules.length > 0) {
+            sheet.deleteRule(0);
+        }
+        sheet.insertRule(rule, 0);
+    }
+}