@box/blueprint-web 12.6.0 → 12.7.0

package/dist/lib-esm/branding-styles/branding-styles.d.ts

@@ -1,2 +1,2 @@
 import { type BrandingStylesProps } from './types';
-export declare const BrandingStyles: ({ brandColor }: BrandingStylesProps) => null;
+export declare const BrandingStyles: ({ brandColor, containerSelector }: BrandingStylesProps) => null;

package/dist/lib-esm/branding-styles/branding-styles.js

@@ -1,9 +1,10 @@
 import { useCustomBranding } from './useCustomBranding.js';
 
 const BrandingStyles = ({
-  brandColor
+  brandColor,
+  containerSelector = ':root[lang]'
 }) => {
-  useCustomBranding(brandColor);
+  useCustomBranding(brandColor, containerSelector);
   return null;
 };
 

package/dist/lib-esm/branding-styles/types.d.ts

@@ -1,4 +1,6 @@
 export interface BrandingStylesProps {
     /** Color value used for generating theme color palette */
     brandColor: string;
+    /** CSS selector for the element where branding tokens will be attached - defaults to :root[lang] */
+    containerSelector?: string;
 }

package/dist/lib-esm/branding-styles/useCustomBranding.d.ts

@@ -1 +1,3 @@
-export declare const useCustomBranding: (brandColor: string) => void;
+import { createTheme } from './utils/createTheme';
+export declare const getBrandingTokensCssRule: (buieTheme: ReturnType<typeof createTheme>, isBrandingEnabled: boolean, containerSelector: string, tokenPrefix?: string) => string;
+export declare const useCustomBranding: (brandColor: string, containerSelector?: string) => void;

package/dist/lib-esm/branding-styles/useCustomBranding.js

@@ -1,8 +1,36 @@
-import { BoxBlue100, Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Gray65, BoxBlue100 } from '@box/blueprint-web-assets/tokens/tokens';
 import { useEnhancedEffect } from '../utils/useEnhancedEffect.js';
 import { createTheme } from './utils/createTheme.js';
 
-const useCustomBranding = brandColor => {
+const getBrandingTokensCssRule = (buieTheme, isBrandingEnabled, containerSelector, tokenPrefix = '--') => {
+  return `
+    ${containerSelector} {
+        /* Button branding tokens */
+        ${tokenPrefix}text-text-brand-on-color: ${buieTheme.primary.buttonForeground};
+        ${tokenPrefix}surface-surface-brand: ${buieTheme.primary.buttonBackground};
+        ${tokenPrefix}surface-surface-brand-hover: ${buieTheme.primary.buttonBackgroundHover};
+        ${tokenPrefix}surface-surface-brand-pressed: ${buieTheme.primary.buttonBackgroundActive};
+        /* BUIE Theme has no token for disabled and busy button. Setting to default TODO: Confirm with designers */
+        ${tokenPrefix}surface-surface-brand-disabled: ${buieTheme.primary.buttonBackground};
+        ${tokenPrefix}surface-surface-brand-busy: ${buieTheme.primary.buttonBackground};
+
+        /* Nav branding tokens */
+        ${tokenPrefix}surface-nav-surface-brand-selected-focus: ${buieTheme.primary.backgroundActive};
+        ${tokenPrefix}surface-nav-surface-brand-selected: ${buieTheme.primary.backgroundActive};
+        ${tokenPrefix}surface-nav-surface-brand-focus: ${buieTheme.primary.backgroundActive};
+        ${tokenPrefix}surface-nav-surface-brand-hover: ${buieTheme.primary.backgroundHover};
+        ${tokenPrefix}surface-nav-surface-brand: ${buieTheme.primary.background};
+        ${tokenPrefix}surface-nav-surface-brand-foreground: ${buieTheme.primary.foreground};
+        ${tokenPrefix}surface-nav-surface-brand-divider: ${buieTheme.primary.dividerBackground};
+
+        /* Illustrations branding tokens */
+        ${tokenPrefix}surface-illustration-surface-box-neutral: ${isBrandingEnabled ? Gray65 : BoxBlue100};
+
+        /* Progress bar branding tokens */
+        ${tokenPrefix}surface-progress-bar-surface-brand-background: ${buieTheme.primary.progressBarBackground};
+    }`;
+};
+const useCustomBranding = (brandColor, containerSelector = ':root[lang]') => {
   useEnhancedEffect(() => {
     const buieTheme = createTheme(brandColor);
     const isBrandingEnabled = brandColor.toLowerCase() !== BoxBlue100.toLowerCase();
@@ -11,37 +39,13 @@ const useCustomBranding = brandColor => {
     // add data-blueprint property for debugging
     stylesheet.dataset.blueprint = '';
     document.head.appendChild(stylesheet);
-    stylesheet.sheet?.insertRule(
-    // "lang" attribute selector for increased specificity
-    `:root[lang] {
-                /* Button branding tokens */
-                --text-text-brand-on-color: ${buieTheme.primary.buttonForeground};
-                --surface-surface-brand: ${buieTheme.primary.buttonBackground};
-                --surface-surface-brand-hover: ${buieTheme.primary.buttonBackgroundHover};
-                --surface-surface-brand-pressed: ${buieTheme.primary.buttonBackgroundActive};
-                /* BUIE Theme has no token for disabled and busy button. Setting to default TODO: Confirm with designers */
-                --surface-surface-brand-disabled: ${buieTheme.primary.buttonBackground};
-                --surface-surface-brand-busy: ${buieTheme.primary.buttonBackground};
-
-                /* Nav branding tokens */
-                --surface-nav-surface-brand-selected-focus: ${buieTheme.primary.backgroundActive};
-                --surface-nav-surface-brand-selected: ${buieTheme.primary.backgroundActive};
-                --surface-nav-surface-brand-focus: ${buieTheme.primary.backgroundActive};
-                --surface-nav-surface-brand-hover: ${buieTheme.primary.backgroundHover};
-                --surface-nav-surface-brand: ${buieTheme.primary.background};
-                --surface-nav-surface-brand-foreground: ${buieTheme.primary.foreground};
-                --surface-nav-surface-brand-divider: ${buieTheme.primary.dividerBackground};
-
-                /* Illustrations branding tokens */
-                --surface-illustration-surface-box-neutral: ${isBrandingEnabled ? Gray65 : BoxBlue100};
-
-                /* Progress bar branding tokens */
-                --surface-progress-bar-surface-brand-background: ${buieTheme.primary.progressBarBackground};
-              }`, 0);
+    stylesheet.sheet?.insertRule(getBrandingTokensCssRule(buieTheme, isBrandingEnabled, containerSelector), 0);
+    // Blueprint 2.0 tokens
+    stylesheet.sheet?.insertRule(getBrandingTokensCssRule(buieTheme, isBrandingEnabled, containerSelector, '--bp-'), 0);
     return () => {
       document.head.removeChild(stylesheet);
     };
   }, [brandColor]);
 };
 
-export { useCustomBranding };
+export { getBrandingTokensCssRule, useCustomBranding };

package/dist/lib-esm/index.js

@@ -7,7 +7,7 @@ export { StatusBadge } from './badge/status-badge.js';
 export { BlueprintModernizationProvider } from './blueprint-modernization-context/blueprint-modernization-context.js';
 export { useBlueprintModernization } from './blueprint-modernization-context/useBlueprintModernization.js';
 export { BrandingStyles } from './branding-styles/branding-styles.js';
-export { useCustomBranding } from './branding-styles/useCustomBranding.js';
+export { getBrandingTokensCssRule, useCustomBranding } from './branding-styles/useCustomBranding.js';
 export { Button } from './button/button.js';
 export { ButtonWrapper } from './button-wrapper/button-wrapper.js';
 export { Card } from './card/card.js';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.6.0",
+    "version": "12.7.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {