@box/blueprint-web 12.6.0 → 12.7.1

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.css

@@ -1759,20 +1759,17 @@
 .bp_text_area_module_textAreaContainer--e7ad7 .bp_text_area_module_inlineError--e7ad7{
   margin-block-start:var(--space-2);
 }
-.bp_labelable_module_required--23e9d{
+.bp_labelable_module_required--25dbc{
   align-items:center;
   display:inline-flex;
   gap:var(--space-1);
 }
-.bp_labelable_module_required--23e9d::before{
+.bp_labelable_module_required--25dbc::before{
   color:var(--icon-icon-required-on-light);
   content:"*";
   font-family:monospace;
   transform:scale(1.2);
 }
-.bp_labelable_module_required--23e9d::before *{
-  fill:var(--icon-icon-required-on-light);
-}
 
 .bp_combobox_module_container--25995{
   display:flex;

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/dist/lib-esm/util-components/labelable/labelable.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"required":"bp_labelable_module_required--23e9d"};
+var styles = {"required":"bp_labelable_module_required--25dbc"};
 
 export { styles as default };

package/package.json

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