@twilio-paste/theme - npm Package Compare versions

Comparing version

11.1.0

11.1.1

+7

-1

dist/index.debug.es.js

		@@ -444,3 +444,9 @@ // src/themeConsumer.tsx
		var remToPx = (rem, type = "number") => {
		const remValue = typeof rem === "string" ? Number.parseFloat(rem.replace("rem", "")) : rem;
		let remValue;
		if (typeof rem === "string" && rem.includes("%")) {
		const percentage = Number.parseFloat(rem.replace("%", ""));
		remValue = percentage / 100;
		} else {
		remValue = typeof rem === "string" ? Number.parseFloat(rem.replace("rem", "")) : rem;
		}
		const pxValue = Math.round(remValue * PX_PER_REM);
		@@ -447,0 +453,0 @@ return type === "number" ? pxValue : `${pxValue}px`;

+7

-1

dist/index.debug.js

		@@ -471,3 +471,9 @@ "use strict";
		var remToPx = (rem, type = "number") => {
		const remValue = typeof rem === "string" ? Number.parseFloat(rem.replace("rem", "")) : rem;
		let remValue;
		if (typeof rem === "string" && rem.includes("%")) {
		const percentage = Number.parseFloat(rem.replace("%", ""));
		remValue = percentage / 100;
		} else {
		remValue = typeof rem === "string" ? Number.parseFloat(rem.replace("rem", "")) : rem;
		}
		const pxValue = Math.round(remValue * PX_PER_REM);
		@@ -474,0 +480,0 @@ return type === "number" ? pxValue : `${pxValue}px`;

+1

-1

dist/index.es.js

		@@ -323,2 +323,2 @@ import{ThemeContext}from"@twilio-paste/styling-library";importas React from"react";var ThemeConsumer=({children,...props})=>{if(children==null\|\|typeof children!="function")throw new Error("[ThemeConsumer]: You must pass a function as children");return React.createElement(ThemeContext.Consumer,null,theme=>children({...props,theme}))};ThemeConsumer.displayName="PasteThemeConsumer";import{Globals as AnimatedGlobals,useReducedMotion}from"@twilio-paste/animation-library";import{CacheProvider as EmotionCacheProvider,StylingGlobals,ThemeProvider as EmotionThemeProvider,createCache,styled}from"@twilio-paste/styling-library";importas React2 from"react";var ThemeVariants={DEFAULT:"default",SENDGRID:"sendgrid",DARK:"dark",TWILIO:"twilio",TWILIO_DARK:"twilio-dark",EVERGREEN:"evergreen"};import{css}from"@twilio-paste/styling-library";var pasteBaseStyles=css({color:"colorText",colorScheme:"colorScheme",fontSize:"fontSize30",fontFamily:"fontFamilyText",lineHeight:"lineHeight30",fontWeight:"fontWeightNormal",fontVariantNumeric:"tabular-nums"});import{EmotionCSS}from"@twilio-paste/styling-library";var pasteFonts=EmotionCSS`
		}
		`;import{css as css2}from"@twilio-paste/styling-library";var pasteGlobalStyles=css2({html:{fontSize:"fontSizeBase",fontFamily:"fontFamilyText"},"html:lang(ja), html:lang(ja-JP)":{".paste-theme-provider":{fontFamily:"fontFamilyTextJapanese"}},"html:lang(zh-CN)":{".paste-theme-provider":{fontFamily:"fontFamilyTextChineseSimplified"}},"html:lang(zh-TW), html:lang(zh-HK)":{".paste-theme-provider":{fontFamily:"fontFamilyTextChineseTraditional"}},"html:lang(ko)":{".paste-theme-provider":{fontFamily:"fontFamilyTextKorean"}},body:{backgroundColor:"colorBackgroundBody",margin:0},", ::after, ::before":{boxSizing:"border-box"},"@media (prefers-reduced-motion: reduce)":{"":{animationDuration:"0 !important",animationIterationCount:"1 !important",transitionDuration:"0 !important",scrollBehavior:"auto !important"}},":root":{["--reach-dialog"]:"1"}});import{backgroundColors,borderColors,borderWidths,boxShadows,colorSchemes,colors,dataVisualization,fontSizes,fontWeights,fonts,lineHeights,radii,sizings,spacings,textColors,zIndices}from"@twilio-paste/design-tokens/dist/themes/dark/tokens.es6";var remToPx=(rem,type="number")=>{let remValue=typeof rem=="string"?Number.parseFloat(rem.replace("rem","")):rem,pxValue=Math.round(remValue16);return type==="number"?pxValue:`${pxValue}px`};var generateThemeFromTokens=({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,dataVisualization:dataVisualization7,colorSchemes:colorSchemes7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,boxShadows:boxShadows7,sizings:sizings7,spacings:spacings7,textColors:textColors7,zIndices:zIndices7})=>{let breakpoints=[remToPx(sizings7.size40,"string"),remToPx(sizings7.size100,"string"),remToPx(sizings7.size120,"string")];return{shadows:boxShadows7,borderWidths:borderWidths7,radii:radii7,breakpoints,textColors:textColors7,colorSchemes:colorSchemes7,borderColors:borderColors7,backgroundColors:backgroundColors7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,widths:sizings7,maxWidths:sizings7,minWidths:sizings7,heights:sizings7,maxHeights:sizings7,minHeights:sizings7,sizes:sizings7,iconSizes:{sizeIcon05:sizings7.sizeIcon05,sizeIcon10:sizings7.sizeIcon10,sizeIcon20:sizings7.sizeIcon20,sizeIcon30:sizings7.sizeIcon30,sizeIcon40:sizings7.sizeIcon40,sizeIcon50:sizings7.sizeIcon50,sizeIcon60:sizings7.sizeIcon60,sizeIcon70:sizings7.sizeIcon70,sizeIcon80:sizings7.sizeIcon80,sizeIcon90:sizings7.sizeIcon90,sizeIcon100:sizings7.sizeIcon100,sizeIcon110:sizings7.sizeIcon110},space:spacings7,zIndices:zIndices7,dataVisualization:dataVisualization7}};var DarkTheme=generateThemeFromTokens({backgroundColors,borderColors,borderWidths,radii,fonts,fontSizes,fontWeights,lineHeights,boxShadows,sizings,spacings,textColors,zIndices,dataVisualization,colors,colorSchemes});import{backgroundColors as backgroundColors2,borderColors as borderColors2,borderWidths as borderWidths2,boxShadows as boxShadows2,colorSchemes as colorSchemes2,colors as colors2,dataVisualization as dataVisualization2,fontSizes as fontSizes2,fontWeights as fontWeights2,fonts as fonts2,lineHeights as lineHeights2,radii as radii2,sizings as sizings2,spacings as spacings2,textColors as textColors2,zIndices as zIndices2}from"@twilio-paste/design-tokens";var DefaultTheme=generateThemeFromTokens({backgroundColors:backgroundColors2,borderColors:borderColors2,borderWidths:borderWidths2,radii:radii2,fonts:fonts2,fontSizes:fontSizes2,fontWeights:fontWeights2,lineHeights:lineHeights2,boxShadows:boxShadows2,sizings:sizings2,spacings:spacings2,textColors:textColors2,zIndices:zIndices2,dataVisualization:dataVisualization2,colors:colors2,colorSchemes:colorSchemes2});import{backgroundColors as backgroundColors3,borderColors as borderColors3,borderWidths as borderWidths3,boxShadows as boxShadows3,colorSchemes as colorSchemes3,colors as colors3,dataVisualization as dataVisualization3,fontSizes as fontSizes3,fontWeights as fontWeights3,fonts as fonts3,lineHeights as lineHeights3,radii as radii3,sizings as sizings3,spacings as spacings3,textColors as textColors3,zIndices as zIndices3}from"@twilio-paste/design-tokens/dist/themes/evergreen/tokens.es6";var EvergreenTheme=generateThemeFromTokens({backgroundColors:backgroundColors3,borderColors:borderColors3,borderWidths:borderWidths3,radii:radii3,fonts:fonts3,fontSizes:fontSizes3,fontWeights:fontWeights3,lineHeights:lineHeights3,boxShadows:boxShadows3,sizings:sizings3,spacings:spacings3,textColors:textColors3,zIndices:zIndices3,dataVisualization:dataVisualization3,colors:colors3,colorSchemes:colorSchemes3});import{backgroundColors as backgroundColors4,borderColors as borderColors4,borderWidths as borderWidths4,boxShadows as boxShadows4,colorSchemes as colorSchemes4,colors as colors4,dataVisualization as dataVisualization4,fontSizes as fontSizes4,fontWeights as fontWeights4,fonts as fonts4,lineHeights as lineHeights4,radii as radii4,sizings as sizings4,spacings as spacings4,textColors as textColors4,zIndices as zIndices4}from"@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.es6";var SendGridTheme=generateThemeFromTokens({backgroundColors:backgroundColors4,borderColors:borderColors4,borderWidths:borderWidths4,radii:radii4,fonts:fonts4,fontSizes:fontSizes4,fontWeights:fontWeights4,lineHeights:lineHeights4,boxShadows:boxShadows4,sizings:sizings4,spacings:spacings4,textColors:textColors4,zIndices:zIndices4,dataVisualization:dataVisualization4,colors:colors4,colorSchemes:colorSchemes4});import{backgroundColors as backgroundColors5,borderColors as borderColors5,borderWidths as borderWidths5,boxShadows as boxShadows5,colorSchemes as colorSchemes5,colors as colors5,dataVisualization as dataVisualization5,fontSizes as fontSizes5,fontWeights as fontWeights5,fonts as fonts5,lineHeights as lineHeights5,radii as radii5,sizings as sizings5,spacings as spacings5,textColors as textColors5,zIndices as zIndices5}from"@twilio-paste/design-tokens/dist/themes/twilio/tokens.es6";var TwilioTheme=generateThemeFromTokens({backgroundColors:backgroundColors5,borderColors:borderColors5,borderWidths:borderWidths5,radii:radii5,fonts:fonts5,fontSizes:fontSizes5,fontWeights:fontWeights5,lineHeights:lineHeights5,boxShadows:boxShadows5,sizings:sizings5,spacings:spacings5,textColors:textColors5,zIndices:zIndices5,dataVisualization:dataVisualization5,colors:colors5,colorSchemes:colorSchemes5});import{backgroundColors as backgroundColors6,borderColors as borderColors6,borderWidths as borderWidths6,boxShadows as boxShadows6,colorSchemes as colorSchemes6,colors as colors6,dataVisualization as dataVisualization6,fontSizes as fontSizes6,fontWeights as fontWeights6,fonts as fonts6,lineHeights as lineHeights6,radii as radii6,sizings as sizings6,spacings as spacings6,textColors as textColors6,zIndices as zIndices6}from"@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.es6";var TwilioDarkTheme=generateThemeFromTokens({backgroundColors:backgroundColors6,borderColors:borderColors6,borderWidths:borderWidths6,radii:radii6,fonts:fonts6,fontSizes:fontSizes6,fontWeights:fontWeights6,lineHeights:lineHeights6,boxShadows:boxShadows6,sizings:sizings6,spacings:spacings6,textColors:textColors6,zIndices:zIndices6,dataVisualization:dataVisualization6,colors:colors6,colorSchemes:colorSchemes6});var ConsoleTheme=DefaultTheme;var getThemeFromHash=()=>{try{if(window.location.hash.includes("paste-theme-override"))return window.location.hash.split("=")[1]}catch{}};var StyledBase=styled.div(pasteBaseStyles),useThemeOverwriteHook=()=>{let[overwriteTheme,setOverwriteTheme]=React2.useState(getThemeFromHash()),handleLocationChange=()=>{setOverwriteTheme(getThemeFromHash())};return React2.useEffect(()=>(window.addEventListener("popstate",handleLocationChange),()=>{window.removeEventListener("popstate",handleLocationChange)})),overwriteTheme};function getProviderThemeProps(theme,customBreakpoints){switch(theme){case ThemeVariants.TWILIO:return{...TwilioTheme,breakpoints:customBreakpoints\|\|TwilioTheme.breakpoints};case ThemeVariants.TWILIO_DARK:return{...TwilioDarkTheme,breakpoints:customBreakpoints\|\|TwilioDarkTheme.breakpoints};case ThemeVariants.DARK:return{...DarkTheme,breakpoints:customBreakpoints\|\|DarkTheme.breakpoints};case ThemeVariants.SENDGRID:return{...SendGridTheme,breakpoints:customBreakpoints\|\|SendGridTheme.breakpoints};case ThemeVariants.EVERGREEN:return{...EvergreenTheme,breakpoints:customBreakpoints\|\|EvergreenTheme.breakpoints};case ThemeVariants.DEFAULT:default:return{...DefaultTheme,breakpoints:customBreakpoints\|\|DefaultTheme.breakpoints}}}var ThemeProvider=({customBreakpoints,theme=ThemeVariants.DEFAULT,disableAnimations=!1,cacheProviderProps,...props})=>{let[cache]=React2.useState(cacheProviderProps?createCache(cacheProviderProps):null),prefersReducedMotion=useReducedMotion();React2.useMemo(()=>{AnimatedGlobals.assign({skipAnimation:disableAnimations\|\|prefersReducedMotion})},[disableAnimations,prefersReducedMotion]);let overwriteTheme=useThemeOverwriteHook(),providerThemeProps=getProviderThemeProps(overwriteTheme\|\|theme,customBreakpoints);return cache?React2.createElement(EmotionCacheProvider,{value:cache},React2.createElement(EmotionThemeProvider,{theme:providerThemeProps},React2.createElement(StylingGlobals,{styles:pasteGlobalStyles({theme:providerThemeProps})}),React2.createElement(StylingGlobals,{styles:pasteFonts}),React2.createElement(StyledBase,{className:"paste-theme-provider",...props}))):React2.createElement(EmotionThemeProvider,{theme:providerThemeProps},React2.createElement(StylingGlobals,{styles:pasteGlobalStyles({theme:providerThemeProps})}),React2.createElement(StylingGlobals,{styles:pasteFonts}),React2.createElement(StyledBase,{className:"paste-theme-provider",...props}))};ThemeProvider.displayName="PasteThemeProvider";import{withTheme}from"@twilio-paste/styling-library";import{ThemeContext as ThemeContext2}from"@twilio-paste/styling-library";importas React3 from"react";var useTheme=()=>{let context=React3.useContext(ThemeContext2);if(!context)throw new Error("[useHook]: must be used within the @twilio-paste/theme provider");return context};var generateTokensFromTheme=({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,colorSchemes:colorSchemes7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,shadows,sizes,space,textColors:textColors7,zIndices:zIndices7,dataVisualization:dataVisualization7})=>({boxShadows:shadows,borderWidths:borderWidths7,radii:radii7,textColors:textColors7,borderColors:borderColors7,backgroundColors:backgroundColors7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,sizings:sizes,spacings:space,zIndices:zIndices7,colorSchemes:colorSchemes7,colors:{},dataVisualization:dataVisualization7});import{getContrastRatingsOfTokensWithTextContrastRequirements,getContrastRatingsOfTokensWithUIControlContrastRequirements,getNumberOfTextFailures,getNumberOfUIControlFailures}from"@twilio-paste/color-contrast-utils";var useThemeContrastCheck=()=>{let theme=useTheme(),designTokens=generateTokensFromTheme(theme),textContrastRating=getContrastRatingsOfTokensWithTextContrastRequirements(designTokens),uiControlContrastRating=getContrastRatingsOfTokensWithUIControlContrastRequirements(designTokens),numberOfTextFailures=getNumberOfTextFailures(textContrastRating),numberOfUIControlFailures=getNumberOfUIControlFailures(uiControlContrastRating),totalFailures=numberOfTextFailures+numberOfUIControlFailures;return{textContrastRating,uiControlContrastRating,numberOfTextFailures,numberOfUIControlFailures,totalFailures}};var Theme={Provider:ThemeProvider,Consumer:ThemeConsumer};export{ConsoleTheme,DarkTheme,DefaultTheme,EvergreenTheme,SendGridTheme,StyledBase,Theme,ThemeVariants,TwilioDarkTheme,TwilioTheme,generateThemeFromTokens,generateTokensFromTheme,pasteBaseStyles,pasteFonts,pasteGlobalStyles,remToPx,useTheme,useThemeContrastCheck,withTheme};
		`;import{css as css2}from"@twilio-paste/styling-library";var pasteGlobalStyles=css2({html:{fontSize:"fontSizeBase",fontFamily:"fontFamilyText"},"html:lang(ja), html:lang(ja-JP)":{".paste-theme-provider":{fontFamily:"fontFamilyTextJapanese"}},"html:lang(zh-CN)":{".paste-theme-provider":{fontFamily:"fontFamilyTextChineseSimplified"}},"html:lang(zh-TW), html:lang(zh-HK)":{".paste-theme-provider":{fontFamily:"fontFamilyTextChineseTraditional"}},"html:lang(ko)":{".paste-theme-provider":{fontFamily:"fontFamilyTextKorean"}},body:{backgroundColor:"colorBackgroundBody",margin:0},", ::after, ::before":{boxSizing:"border-box"},"@media (prefers-reduced-motion: reduce)":{"":{animationDuration:"0 !important",animationIterationCount:"1 !important",transitionDuration:"0 !important",scrollBehavior:"auto !important"}},":root":{["--reach-dialog"]:"1"}});import{backgroundColors,borderColors,borderWidths,boxShadows,colorSchemes,colors,dataVisualization,fontSizes,fontWeights,fonts,lineHeights,radii,sizings,spacings,textColors,zIndices}from"@twilio-paste/design-tokens/dist/themes/dark/tokens.es6";var remToPx=(rem,type="number")=>{let remValue;typeof rem=="string"&&rem.includes("%")?remValue=Number.parseFloat(rem.replace("%",""))/100:remValue=typeof rem=="string"?Number.parseFloat(rem.replace("rem","")):rem;let pxValue=Math.round(remValue16);return type==="number"?pxValue:`${pxValue}px`};var generateThemeFromTokens=({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,dataVisualization:dataVisualization7,colorSchemes:colorSchemes7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,boxShadows:boxShadows7,sizings:sizings7,spacings:spacings7,textColors:textColors7,zIndices:zIndices7})=>{let breakpoints=[remToPx(sizings7.size40,"string"),remToPx(sizings7.size100,"string"),remToPx(sizings7.size120,"string")];return{shadows:boxShadows7,borderWidths:borderWidths7,radii:radii7,breakpoints,textColors:textColors7,colorSchemes:colorSchemes7,borderColors:borderColors7,backgroundColors:backgroundColors7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,widths:sizings7,maxWidths:sizings7,minWidths:sizings7,heights:sizings7,maxHeights:sizings7,minHeights:sizings7,sizes:sizings7,iconSizes:{sizeIcon05:sizings7.sizeIcon05,sizeIcon10:sizings7.sizeIcon10,sizeIcon20:sizings7.sizeIcon20,sizeIcon30:sizings7.sizeIcon30,sizeIcon40:sizings7.sizeIcon40,sizeIcon50:sizings7.sizeIcon50,sizeIcon60:sizings7.sizeIcon60,sizeIcon70:sizings7.sizeIcon70,sizeIcon80:sizings7.sizeIcon80,sizeIcon90:sizings7.sizeIcon90,sizeIcon100:sizings7.sizeIcon100,sizeIcon110:sizings7.sizeIcon110},space:spacings7,zIndices:zIndices7,dataVisualization:dataVisualization7}};var DarkTheme=generateThemeFromTokens({backgroundColors,borderColors,borderWidths,radii,fonts,fontSizes,fontWeights,lineHeights,boxShadows,sizings,spacings,textColors,zIndices,dataVisualization,colors,colorSchemes});import{backgroundColors as backgroundColors2,borderColors as borderColors2,borderWidths as borderWidths2,boxShadows as boxShadows2,colorSchemes as colorSchemes2,colors as colors2,dataVisualization as dataVisualization2,fontSizes as fontSizes2,fontWeights as fontWeights2,fonts as fonts2,lineHeights as lineHeights2,radii as radii2,sizings as sizings2,spacings as spacings2,textColors as textColors2,zIndices as zIndices2}from"@twilio-paste/design-tokens";var DefaultTheme=generateThemeFromTokens({backgroundColors:backgroundColors2,borderColors:borderColors2,borderWidths:borderWidths2,radii:radii2,fonts:fonts2,fontSizes:fontSizes2,fontWeights:fontWeights2,lineHeights:lineHeights2,boxShadows:boxShadows2,sizings:sizings2,spacings:spacings2,textColors:textColors2,zIndices:zIndices2,dataVisualization:dataVisualization2,colors:colors2,colorSchemes:colorSchemes2});import{backgroundColors as backgroundColors3,borderColors as borderColors3,borderWidths as borderWidths3,boxShadows as boxShadows3,colorSchemes as colorSchemes3,colors as colors3,dataVisualization as dataVisualization3,fontSizes as fontSizes3,fontWeights as fontWeights3,fonts as fonts3,lineHeights as lineHeights3,radii as radii3,sizings as sizings3,spacings as spacings3,textColors as textColors3,zIndices as zIndices3}from"@twilio-paste/design-tokens/dist/themes/evergreen/tokens.es6";var EvergreenTheme=generateThemeFromTokens({backgroundColors:backgroundColors3,borderColors:borderColors3,borderWidths:borderWidths3,radii:radii3,fonts:fonts3,fontSizes:fontSizes3,fontWeights:fontWeights3,lineHeights:lineHeights3,boxShadows:boxShadows3,sizings:sizings3,spacings:spacings3,textColors:textColors3,zIndices:zIndices3,dataVisualization:dataVisualization3,colors:colors3,colorSchemes:colorSchemes3});import{backgroundColors as backgroundColors4,borderColors as borderColors4,borderWidths as borderWidths4,boxShadows as boxShadows4,colorSchemes as colorSchemes4,colors as colors4,dataVisualization as dataVisualization4,fontSizes as fontSizes4,fontWeights as fontWeights4,fonts as fonts4,lineHeights as lineHeights4,radii as radii4,sizings as sizings4,spacings as spacings4,textColors as textColors4,zIndices as zIndices4}from"@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.es6";var SendGridTheme=generateThemeFromTokens({backgroundColors:backgroundColors4,borderColors:borderColors4,borderWidths:borderWidths4,radii:radii4,fonts:fonts4,fontSizes:fontSizes4,fontWeights:fontWeights4,lineHeights:lineHeights4,boxShadows:boxShadows4,sizings:sizings4,spacings:spacings4,textColors:textColors4,zIndices:zIndices4,dataVisualization:dataVisualization4,colors:colors4,colorSchemes:colorSchemes4});import{backgroundColors as backgroundColors5,borderColors as borderColors5,borderWidths as borderWidths5,boxShadows as boxShadows5,colorSchemes as colorSchemes5,colors as colors5,dataVisualization as dataVisualization5,fontSizes as fontSizes5,fontWeights as fontWeights5,fonts as fonts5,lineHeights as lineHeights5,radii as radii5,sizings as sizings5,spacings as spacings5,textColors as textColors5,zIndices as zIndices5}from"@twilio-paste/design-tokens/dist/themes/twilio/tokens.es6";var TwilioTheme=generateThemeFromTokens({backgroundColors:backgroundColors5,borderColors:borderColors5,borderWidths:borderWidths5,radii:radii5,fonts:fonts5,fontSizes:fontSizes5,fontWeights:fontWeights5,lineHeights:lineHeights5,boxShadows:boxShadows5,sizings:sizings5,spacings:spacings5,textColors:textColors5,zIndices:zIndices5,dataVisualization:dataVisualization5,colors:colors5,colorSchemes:colorSchemes5});import{backgroundColors as backgroundColors6,borderColors as borderColors6,borderWidths as borderWidths6,boxShadows as boxShadows6,colorSchemes as colorSchemes6,colors as colors6,dataVisualization as dataVisualization6,fontSizes as fontSizes6,fontWeights as fontWeights6,fonts as fonts6,lineHeights as lineHeights6,radii as radii6,sizings as sizings6,spacings as spacings6,textColors as textColors6,zIndices as zIndices6}from"@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.es6";var TwilioDarkTheme=generateThemeFromTokens({backgroundColors:backgroundColors6,borderColors:borderColors6,borderWidths:borderWidths6,radii:radii6,fonts:fonts6,fontSizes:fontSizes6,fontWeights:fontWeights6,lineHeights:lineHeights6,boxShadows:boxShadows6,sizings:sizings6,spacings:spacings6,textColors:textColors6,zIndices:zIndices6,dataVisualization:dataVisualization6,colors:colors6,colorSchemes:colorSchemes6});var ConsoleTheme=DefaultTheme;var getThemeFromHash=()=>{try{if(window.location.hash.includes("paste-theme-override"))return window.location.hash.split("=")[1]}catch{}};var StyledBase=styled.div(pasteBaseStyles),useThemeOverwriteHook=()=>{let[overwriteTheme,setOverwriteTheme]=React2.useState(getThemeFromHash()),handleLocationChange=()=>{setOverwriteTheme(getThemeFromHash())};return React2.useEffect(()=>(window.addEventListener("popstate",handleLocationChange),()=>{window.removeEventListener("popstate",handleLocationChange)})),overwriteTheme};function getProviderThemeProps(theme,customBreakpoints){switch(theme){case ThemeVariants.TWILIO:return{...TwilioTheme,breakpoints:customBreakpoints\|\|TwilioTheme.breakpoints};case ThemeVariants.TWILIO_DARK:return{...TwilioDarkTheme,breakpoints:customBreakpoints\|\|TwilioDarkTheme.breakpoints};case ThemeVariants.DARK:return{...DarkTheme,breakpoints:customBreakpoints\|\|DarkTheme.breakpoints};case ThemeVariants.SENDGRID:return{...SendGridTheme,breakpoints:customBreakpoints\|\|SendGridTheme.breakpoints};case ThemeVariants.EVERGREEN:return{...EvergreenTheme,breakpoints:customBreakpoints\|\|EvergreenTheme.breakpoints};case ThemeVariants.DEFAULT:default:return{...DefaultTheme,breakpoints:customBreakpoints\|\|DefaultTheme.breakpoints}}}var ThemeProvider=({customBreakpoints,theme=ThemeVariants.DEFAULT,disableAnimations=!1,cacheProviderProps,...props})=>{let[cache]=React2.useState(cacheProviderProps?createCache(cacheProviderProps):null),prefersReducedMotion=useReducedMotion();React2.useMemo(()=>{AnimatedGlobals.assign({skipAnimation:disableAnimations\|\|prefersReducedMotion})},[disableAnimations,prefersReducedMotion]);let overwriteTheme=useThemeOverwriteHook(),providerThemeProps=getProviderThemeProps(overwriteTheme\|\|theme,customBreakpoints);return cache?React2.createElement(EmotionCacheProvider,{value:cache},React2.createElement(EmotionThemeProvider,{theme:providerThemeProps},React2.createElement(StylingGlobals,{styles:pasteGlobalStyles({theme:providerThemeProps})}),React2.createElement(StylingGlobals,{styles:pasteFonts}),React2.createElement(StyledBase,{className:"paste-theme-provider",...props}))):React2.createElement(EmotionThemeProvider,{theme:providerThemeProps},React2.createElement(StylingGlobals,{styles:pasteGlobalStyles({theme:providerThemeProps})}),React2.createElement(StylingGlobals,{styles:pasteFonts}),React2.createElement(StyledBase,{className:"paste-theme-provider",...props}))};ThemeProvider.displayName="PasteThemeProvider";import{withTheme}from"@twilio-paste/styling-library";import{ThemeContext as ThemeContext2}from"@twilio-paste/styling-library";importas React3 from"react";var useTheme=()=>{let context=React3.useContext(ThemeContext2);if(!context)throw new Error("[useHook]: must be used within the @twilio-paste/theme provider");return context};var generateTokensFromTheme=({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,colorSchemes:colorSchemes7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,shadows,sizes,space,textColors:textColors7,zIndices:zIndices7,dataVisualization:dataVisualization7})=>({boxShadows:shadows,borderWidths:borderWidths7,radii:radii7,textColors:textColors7,borderColors:borderColors7,backgroundColors:backgroundColors7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,sizings:sizes,spacings:space,zIndices:zIndices7,colorSchemes:colorSchemes7,colors:{},dataVisualization:dataVisualization7});import{getContrastRatingsOfTokensWithTextContrastRequirements,getContrastRatingsOfTokensWithUIControlContrastRequirements,getNumberOfTextFailures,getNumberOfUIControlFailures}from"@twilio-paste/color-contrast-utils";var useThemeContrastCheck=()=>{let theme=useTheme(),designTokens=generateTokensFromTheme(theme),textContrastRating=getContrastRatingsOfTokensWithTextContrastRequirements(designTokens),uiControlContrastRating=getContrastRatingsOfTokensWithUIControlContrastRequirements(designTokens),numberOfTextFailures=getNumberOfTextFailures(textContrastRating),numberOfUIControlFailures=getNumberOfUIControlFailures(uiControlContrastRating),totalFailures=numberOfTextFailures+numberOfUIControlFailures;return{textContrastRating,uiControlContrastRating,numberOfTextFailures,numberOfUIControlFailures,totalFailures}};var Theme={Provider:ThemeProvider,Consumer:ThemeConsumer};export{ConsoleTheme,DarkTheme,DefaultTheme,EvergreenTheme,SendGridTheme,StyledBase,Theme,ThemeVariants,TwilioDarkTheme,TwilioTheme,generateThemeFromTokens,generateTokensFromTheme,pasteBaseStyles,pasteFonts,pasteGlobalStyles,remToPx,useTheme,useThemeContrastCheck,withTheme};

+1

-1

dist/index.js

		@@ -323,2 +323,2 @@ "use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"\|\|typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))\|\|desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode\|\|!mod\|\|!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{ConsoleTheme:()=>ConsoleTheme,DarkTheme:()=>DarkTheme,DefaultTheme:()=>DefaultTheme,EvergreenTheme:()=>EvergreenTheme,SendGridTheme:()=>SendGridTheme,StyledBase:()=>StyledBase,Theme:()=>Theme,ThemeVariants:()=>ThemeVariants,TwilioDarkTheme:()=>TwilioDarkTheme,TwilioTheme:()=>TwilioTheme,generateThemeFromTokens:()=>generateThemeFromTokens,generateTokensFromTheme:()=>generateTokensFromTheme,pasteBaseStyles:()=>pasteBaseStyles,pasteFonts:()=>pasteFonts,pasteGlobalStyles:()=>pasteGlobalStyles,remToPx:()=>remToPx,useTheme:()=>useTheme,useThemeContrastCheck:()=>useThemeContrastCheck,withTheme:()=>import_styling_library6.withTheme});module.exports=__toCommonJS(src_exports);var import_styling_library=require("@twilio-paste/styling-library"),React=__toESM(require("react")),ThemeConsumer=({children,...props})=>{if(children==null\|\|typeof children!="function")throw new Error("[ThemeConsumer]: You must pass a function as children");return React.createElement(import_styling_library.ThemeContext.Consumer,null,theme=>children({...props,theme}))};ThemeConsumer.displayName="PasteThemeConsumer";var import_animation_library=require("@twilio-paste/animation-library"),import_styling_library5=require("@twilio-paste/styling-library"),React2=__toESM(require("react"));var ThemeVariants={DEFAULT:"default",SENDGRID:"sendgrid",DARK:"dark",TWILIO:"twilio",TWILIO_DARK:"twilio-dark",EVERGREEN:"evergreen"};var import_styling_library2=require("@twilio-paste/styling-library"),pasteBaseStyles=(0,import_styling_library2.css)({color:"colorText",colorScheme:"colorScheme",fontSize:"fontSize30",fontFamily:"fontFamilyText",lineHeight:"lineHeight30",fontWeight:"fontWeightNormal",fontVariantNumeric:"tabular-nums"});var import_styling_library3=require("@twilio-paste/styling-library"),pasteFonts=import_styling_library3.EmotionCSS`
		}
		`;var import_styling_library4=require("@twilio-paste/styling-library"),pasteGlobalStyles=(0,import_styling_library4.css)({html:{fontSize:"fontSizeBase",fontFamily:"fontFamilyText"},"html:lang(ja), html:lang(ja-JP)":{".paste-theme-provider":{fontFamily:"fontFamilyTextJapanese"}},"html:lang(zh-CN)":{".paste-theme-provider":{fontFamily:"fontFamilyTextChineseSimplified"}},"html:lang(zh-TW), html:lang(zh-HK)":{".paste-theme-provider":{fontFamily:"fontFamilyTextChineseTraditional"}},"html:lang(ko)":{".paste-theme-provider":{fontFamily:"fontFamilyTextKorean"}},body:{backgroundColor:"colorBackgroundBody",margin:0},", ::after, ::before":{boxSizing:"border-box"},"@media (prefers-reduced-motion: reduce)":{"":{animationDuration:"0 !important",animationIterationCount:"1 !important",transitionDuration:"0 !important",scrollBehavior:"auto !important"}},":root":{["--reach-dialog"]:"1"}});var import_tokens=require("@twilio-paste/design-tokens/dist/themes/dark/tokens.common");var remToPx=(rem,type="number")=>{let remValue=typeof rem=="string"?Number.parseFloat(rem.replace("rem","")):rem,pxValue=Math.round(remValue*16);return type==="number"?pxValue:`${pxValue}px`};var generateThemeFromTokens=({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,dataVisualization:dataVisualization7,colorSchemes:colorSchemes7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,boxShadows:boxShadows7,sizings:sizings7,spacings:spacings7,textColors:textColors7,zIndices:zIndices7})=>{let breakpoints=[remToPx(sizings7.size40,"string"),remToPx(sizings7.size100,"string"),remToPx(sizings7.size120,"string")];return{shadows:boxShadows7,borderWidths:borderWidths7,radii:radii7,breakpoints,textColors:textColors7,colorSchemes:colorSchemes7,borderColors:borderColors7,backgroundColors:backgroundColors7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,widths:sizings7,maxWidths:sizings7,minWidths:sizings7,heights:sizings7,maxHeights:sizings7,minHeights:sizings7,sizes:sizings7,iconSizes:{sizeIcon05:sizings7.sizeIcon05,sizeIcon10:sizings7.sizeIcon10,sizeIcon20:sizings7.sizeIcon20,sizeIcon30:sizings7.sizeIcon30,sizeIcon40:sizings7.sizeIcon40,sizeIcon50:sizings7.sizeIcon50,sizeIcon60:sizings7.sizeIcon60,sizeIcon70:sizings7.sizeIcon70,sizeIcon80:sizings7.sizeIcon80,sizeIcon90:sizings7.sizeIcon90,sizeIcon100:sizings7.sizeIcon100,sizeIcon110:sizings7.sizeIcon110},space:spacings7,zIndices:zIndices7,dataVisualization:dataVisualization7}};var DarkTheme=generateThemeFromTokens({backgroundColors:import_tokens.backgroundColors,borderColors:import_tokens.borderColors,borderWidths:import_tokens.borderWidths,radii:import_tokens.radii,fonts:import_tokens.fonts,fontSizes:import_tokens.fontSizes,fontWeights:import_tokens.fontWeights,lineHeights:import_tokens.lineHeights,boxShadows:import_tokens.boxShadows,sizings:import_tokens.sizings,spacings:import_tokens.spacings,textColors:import_tokens.textColors,zIndices:import_tokens.zIndices,dataVisualization:import_tokens.dataVisualization,colors:import_tokens.colors,colorSchemes:import_tokens.colorSchemes});var import_design_tokens=require("@twilio-paste/design-tokens");var DefaultTheme=generateThemeFromTokens({backgroundColors:import_design_tokens.backgroundColors,borderColors:import_design_tokens.borderColors,borderWidths:import_design_tokens.borderWidths,radii:import_design_tokens.radii,fonts:import_design_tokens.fonts,fontSizes:import_design_tokens.fontSizes,fontWeights:import_design_tokens.fontWeights,lineHeights:import_design_tokens.lineHeights,boxShadows:import_design_tokens.boxShadows,sizings:import_design_tokens.sizings,spacings:import_design_tokens.spacings,textColors:import_design_tokens.textColors,zIndices:import_design_tokens.zIndices,dataVisualization:import_design_tokens.dataVisualization,colors:import_design_tokens.colors,colorSchemes:import_design_tokens.colorSchemes});var import_tokens2=require("@twilio-paste/design-tokens/dist/themes/evergreen/tokens.common");var EvergreenTheme=generateThemeFromTokens({backgroundColors:import_tokens2.backgroundColors,borderColors:import_tokens2.borderColors,borderWidths:import_tokens2.borderWidths,radii:import_tokens2.radii,fonts:import_tokens2.fonts,fontSizes:import_tokens2.fontSizes,fontWeights:import_tokens2.fontWeights,lineHeights:import_tokens2.lineHeights,boxShadows:import_tokens2.boxShadows,sizings:import_tokens2.sizings,spacings:import_tokens2.spacings,textColors:import_tokens2.textColors,zIndices:import_tokens2.zIndices,dataVisualization:import_tokens2.dataVisualization,colors:import_tokens2.colors,colorSchemes:import_tokens2.colorSchemes});var import_tokens3=require("@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.common");var SendGridTheme=generateThemeFromTokens({backgroundColors:import_tokens3.backgroundColors,borderColors:import_tokens3.borderColors,borderWidths:import_tokens3.borderWidths,radii:import_tokens3.radii,fonts:import_tokens3.fonts,fontSizes:import_tokens3.fontSizes,fontWeights:import_tokens3.fontWeights,lineHeights:import_tokens3.lineHeights,boxShadows:import_tokens3.boxShadows,sizings:import_tokens3.sizings,spacings:import_tokens3.spacings,textColors:import_tokens3.textColors,zIndices:import_tokens3.zIndices,dataVisualization:import_tokens3.dataVisualization,colors:import_tokens3.colors,colorSchemes:import_tokens3.colorSchemes});var import_tokens4=require("@twilio-paste/design-tokens/dist/themes/twilio/tokens.common");var TwilioTheme=generateThemeFromTokens({backgroundColors:import_tokens4.backgroundColors,borderColors:import_tokens4.borderColors,borderWidths:import_tokens4.borderWidths,radii:import_tokens4.radii,fonts:import_tokens4.fonts,fontSizes:import_tokens4.fontSizes,fontWeights:import_tokens4.fontWeights,lineHeights:import_tokens4.lineHeights,boxShadows:import_tokens4.boxShadows,sizings:import_tokens4.sizings,spacings:import_tokens4.spacings,textColors:import_tokens4.textColors,zIndices:import_tokens4.zIndices,dataVisualization:import_tokens4.dataVisualization,colors:import_tokens4.colors,colorSchemes:import_tokens4.colorSchemes});var import_tokens5=require("@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.common");var TwilioDarkTheme=generateThemeFromTokens({backgroundColors:import_tokens5.backgroundColors,borderColors:import_tokens5.borderColors,borderWidths:import_tokens5.borderWidths,radii:import_tokens5.radii,fonts:import_tokens5.fonts,fontSizes:import_tokens5.fontSizes,fontWeights:import_tokens5.fontWeights,lineHeights:import_tokens5.lineHeights,boxShadows:import_tokens5.boxShadows,sizings:import_tokens5.sizings,spacings:import_tokens5.spacings,textColors:import_tokens5.textColors,zIndices:import_tokens5.zIndices,dataVisualization:import_tokens5.dataVisualization,colors:import_tokens5.colors,colorSchemes:import_tokens5.colorSchemes});var ConsoleTheme=DefaultTheme;var getThemeFromHash=()=>{try{if(window.location.hash.includes("paste-theme-override"))return window.location.hash.split("=")[1]}catch{}};var StyledBase=import_styling_library5.styled.div(pasteBaseStyles),useThemeOverwriteHook=()=>{let[overwriteTheme,setOverwriteTheme]=React2.useState(getThemeFromHash()),handleLocationChange=()=>{setOverwriteTheme(getThemeFromHash())};return React2.useEffect(()=>(window.addEventListener("popstate",handleLocationChange),()=>{window.removeEventListener("popstate",handleLocationChange)})),overwriteTheme};function getProviderThemeProps(theme,customBreakpoints){switch(theme){case ThemeVariants.TWILIO:return{...TwilioTheme,breakpoints:customBreakpoints\|\|TwilioTheme.breakpoints};case ThemeVariants.TWILIO_DARK:return{...TwilioDarkTheme,breakpoints:customBreakpoints\|\|TwilioDarkTheme.breakpoints};case ThemeVariants.DARK:return{...DarkTheme,breakpoints:customBreakpoints\|\|DarkTheme.breakpoints};case ThemeVariants.SENDGRID:return{...SendGridTheme,breakpoints:customBreakpoints\|\|SendGridTheme.breakpoints};case ThemeVariants.EVERGREEN:return{...EvergreenTheme,breakpoints:customBreakpoints\|\|EvergreenTheme.breakpoints};case ThemeVariants.DEFAULT:default:return{...DefaultTheme,breakpoints:customBreakpoints\|\|DefaultTheme.breakpoints}}}var ThemeProvider=({customBreakpoints,theme=ThemeVariants.DEFAULT,disableAnimations=!1,cacheProviderProps,...props})=>{let[cache]=React2.useState(cacheProviderProps?(0,import_styling_library5.createCache)(cacheProviderProps):null),prefersReducedMotion=(0,import_animation_library.useReducedMotion)();React2.useMemo(()=>{import_animation_library.Globals.assign({skipAnimation:disableAnimations\|\|prefersReducedMotion})},[disableAnimations,prefersReducedMotion]);let overwriteTheme=useThemeOverwriteHook(),providerThemeProps=getProviderThemeProps(overwriteTheme\|\|theme,customBreakpoints);return cache?React2.createElement(import_styling_library5.CacheProvider,{value:cache},React2.createElement(import_styling_library5.ThemeProvider,{theme:providerThemeProps},React2.createElement(import_styling_library5.StylingGlobals,{styles:pasteGlobalStyles({theme:providerThemeProps})}),React2.createElement(import_styling_library5.StylingGlobals,{styles:pasteFonts}),React2.createElement(StyledBase,{className:"paste-theme-provider",...props}))):React2.createElement(import_styling_library5.ThemeProvider,{theme:providerThemeProps},React2.createElement(import_styling_library5.StylingGlobals,{styles:pasteGlobalStyles({theme:providerThemeProps})}),React2.createElement(import_styling_library5.StylingGlobals,{styles:pasteFonts}),React2.createElement(StyledBase,{className:"paste-theme-provider",...props}))};ThemeProvider.displayName="PasteThemeProvider";var import_styling_library6=require("@twilio-paste/styling-library");var import_styling_library7=require("@twilio-paste/styling-library"),React3=__toESM(require("react")),useTheme=()=>{let context=React3.useContext(import_styling_library7.ThemeContext);if(!context)throw new Error("[useHook]: must be used within the @twilio-paste/theme provider");return context};var generateTokensFromTheme=({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,colorSchemes:colorSchemes7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,shadows,sizes,space,textColors:textColors7,zIndices:zIndices7,dataVisualization:dataVisualization7})=>({boxShadows:shadows,borderWidths:borderWidths7,radii:radii7,textColors:textColors7,borderColors:borderColors7,backgroundColors:backgroundColors7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,sizings:sizes,spacings:space,zIndices:zIndices7,colorSchemes:colorSchemes7,colors:{},dataVisualization:dataVisualization7});var import_color_contrast_utils=require("@twilio-paste/color-contrast-utils");var useThemeContrastCheck=()=>{let theme=useTheme(),designTokens=generateTokensFromTheme(theme),textContrastRating=(0,import_color_contrast_utils.getContrastRatingsOfTokensWithTextContrastRequirements)(designTokens),uiControlContrastRating=(0,import_color_contrast_utils.getContrastRatingsOfTokensWithUIControlContrastRequirements)(designTokens),numberOfTextFailures=(0,import_color_contrast_utils.getNumberOfTextFailures)(textContrastRating),numberOfUIControlFailures=(0,import_color_contrast_utils.getNumberOfUIControlFailures)(uiControlContrastRating),totalFailures=numberOfTextFailures+numberOfUIControlFailures;return{textContrastRating,uiControlContrastRating,numberOfTextFailures,numberOfUIControlFailures,totalFailures}};var Theme={Provider:ThemeProvider,Consumer:ThemeConsumer};
		`;var import_styling_library4=require("@twilio-paste/styling-library"),pasteGlobalStyles=(0,import_styling_library4.css)({html:{fontSize:"fontSizeBase",fontFamily:"fontFamilyText"},"html:lang(ja), html:lang(ja-JP)":{".paste-theme-provider":{fontFamily:"fontFamilyTextJapanese"}},"html:lang(zh-CN)":{".paste-theme-provider":{fontFamily:"fontFamilyTextChineseSimplified"}},"html:lang(zh-TW), html:lang(zh-HK)":{".paste-theme-provider":{fontFamily:"fontFamilyTextChineseTraditional"}},"html:lang(ko)":{".paste-theme-provider":{fontFamily:"fontFamilyTextKorean"}},body:{backgroundColor:"colorBackgroundBody",margin:0},", ::after, ::before":{boxSizing:"border-box"},"@media (prefers-reduced-motion: reduce)":{"":{animationDuration:"0 !important",animationIterationCount:"1 !important",transitionDuration:"0 !important",scrollBehavior:"auto !important"}},":root":{["--reach-dialog"]:"1"}});var import_tokens=require("@twilio-paste/design-tokens/dist/themes/dark/tokens.common");var remToPx=(rem,type="number")=>{let remValue;typeof rem=="string"&&rem.includes("%")?remValue=Number.parseFloat(rem.replace("%",""))/100:remValue=typeof rem=="string"?Number.parseFloat(rem.replace("rem","")):rem;let pxValue=Math.round(remValue*16);return type==="number"?pxValue:`${pxValue}px`};var generateThemeFromTokens=({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,dataVisualization:dataVisualization7,colorSchemes:colorSchemes7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,boxShadows:boxShadows7,sizings:sizings7,spacings:spacings7,textColors:textColors7,zIndices:zIndices7})=>{let breakpoints=[remToPx(sizings7.size40,"string"),remToPx(sizings7.size100,"string"),remToPx(sizings7.size120,"string")];return{shadows:boxShadows7,borderWidths:borderWidths7,radii:radii7,breakpoints,textColors:textColors7,colorSchemes:colorSchemes7,borderColors:borderColors7,backgroundColors:backgroundColors7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,widths:sizings7,maxWidths:sizings7,minWidths:sizings7,heights:sizings7,maxHeights:sizings7,minHeights:sizings7,sizes:sizings7,iconSizes:{sizeIcon05:sizings7.sizeIcon05,sizeIcon10:sizings7.sizeIcon10,sizeIcon20:sizings7.sizeIcon20,sizeIcon30:sizings7.sizeIcon30,sizeIcon40:sizings7.sizeIcon40,sizeIcon50:sizings7.sizeIcon50,sizeIcon60:sizings7.sizeIcon60,sizeIcon70:sizings7.sizeIcon70,sizeIcon80:sizings7.sizeIcon80,sizeIcon90:sizings7.sizeIcon90,sizeIcon100:sizings7.sizeIcon100,sizeIcon110:sizings7.sizeIcon110},space:spacings7,zIndices:zIndices7,dataVisualization:dataVisualization7}};var DarkTheme=generateThemeFromTokens({backgroundColors:import_tokens.backgroundColors,borderColors:import_tokens.borderColors,borderWidths:import_tokens.borderWidths,radii:import_tokens.radii,fonts:import_tokens.fonts,fontSizes:import_tokens.fontSizes,fontWeights:import_tokens.fontWeights,lineHeights:import_tokens.lineHeights,boxShadows:import_tokens.boxShadows,sizings:import_tokens.sizings,spacings:import_tokens.spacings,textColors:import_tokens.textColors,zIndices:import_tokens.zIndices,dataVisualization:import_tokens.dataVisualization,colors:import_tokens.colors,colorSchemes:import_tokens.colorSchemes});var import_design_tokens=require("@twilio-paste/design-tokens");var DefaultTheme=generateThemeFromTokens({backgroundColors:import_design_tokens.backgroundColors,borderColors:import_design_tokens.borderColors,borderWidths:import_design_tokens.borderWidths,radii:import_design_tokens.radii,fonts:import_design_tokens.fonts,fontSizes:import_design_tokens.fontSizes,fontWeights:import_design_tokens.fontWeights,lineHeights:import_design_tokens.lineHeights,boxShadows:import_design_tokens.boxShadows,sizings:import_design_tokens.sizings,spacings:import_design_tokens.spacings,textColors:import_design_tokens.textColors,zIndices:import_design_tokens.zIndices,dataVisualization:import_design_tokens.dataVisualization,colors:import_design_tokens.colors,colorSchemes:import_design_tokens.colorSchemes});var import_tokens2=require("@twilio-paste/design-tokens/dist/themes/evergreen/tokens.common");var EvergreenTheme=generateThemeFromTokens({backgroundColors:import_tokens2.backgroundColors,borderColors:import_tokens2.borderColors,borderWidths:import_tokens2.borderWidths,radii:import_tokens2.radii,fonts:import_tokens2.fonts,fontSizes:import_tokens2.fontSizes,fontWeights:import_tokens2.fontWeights,lineHeights:import_tokens2.lineHeights,boxShadows:import_tokens2.boxShadows,sizings:import_tokens2.sizings,spacings:import_tokens2.spacings,textColors:import_tokens2.textColors,zIndices:import_tokens2.zIndices,dataVisualization:import_tokens2.dataVisualization,colors:import_tokens2.colors,colorSchemes:import_tokens2.colorSchemes});var import_tokens3=require("@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.common");var SendGridTheme=generateThemeFromTokens({backgroundColors:import_tokens3.backgroundColors,borderColors:import_tokens3.borderColors,borderWidths:import_tokens3.borderWidths,radii:import_tokens3.radii,fonts:import_tokens3.fonts,fontSizes:import_tokens3.fontSizes,fontWeights:import_tokens3.fontWeights,lineHeights:import_tokens3.lineHeights,boxShadows:import_tokens3.boxShadows,sizings:import_tokens3.sizings,spacings:import_tokens3.spacings,textColors:import_tokens3.textColors,zIndices:import_tokens3.zIndices,dataVisualization:import_tokens3.dataVisualization,colors:import_tokens3.colors,colorSchemes:import_tokens3.colorSchemes});var import_tokens4=require("@twilio-paste/design-tokens/dist/themes/twilio/tokens.common");var TwilioTheme=generateThemeFromTokens({backgroundColors:import_tokens4.backgroundColors,borderColors:import_tokens4.borderColors,borderWidths:import_tokens4.borderWidths,radii:import_tokens4.radii,fonts:import_tokens4.fonts,fontSizes:import_tokens4.fontSizes,fontWeights:import_tokens4.fontWeights,lineHeights:import_tokens4.lineHeights,boxShadows:import_tokens4.boxShadows,sizings:import_tokens4.sizings,spacings:import_tokens4.spacings,textColors:import_tokens4.textColors,zIndices:import_tokens4.zIndices,dataVisualization:import_tokens4.dataVisualization,colors:import_tokens4.colors,colorSchemes:import_tokens4.colorSchemes});var import_tokens5=require("@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.common");var TwilioDarkTheme=generateThemeFromTokens({backgroundColors:import_tokens5.backgroundColors,borderColors:import_tokens5.borderColors,borderWidths:import_tokens5.borderWidths,radii:import_tokens5.radii,fonts:import_tokens5.fonts,fontSizes:import_tokens5.fontSizes,fontWeights:import_tokens5.fontWeights,lineHeights:import_tokens5.lineHeights,boxShadows:import_tokens5.boxShadows,sizings:import_tokens5.sizings,spacings:import_tokens5.spacings,textColors:import_tokens5.textColors,zIndices:import_tokens5.zIndices,dataVisualization:import_tokens5.dataVisualization,colors:import_tokens5.colors,colorSchemes:import_tokens5.colorSchemes});var ConsoleTheme=DefaultTheme;var getThemeFromHash=()=>{try{if(window.location.hash.includes("paste-theme-override"))return window.location.hash.split("=")[1]}catch{}};var StyledBase=import_styling_library5.styled.div(pasteBaseStyles),useThemeOverwriteHook=()=>{let[overwriteTheme,setOverwriteTheme]=React2.useState(getThemeFromHash()),handleLocationChange=()=>{setOverwriteTheme(getThemeFromHash())};return React2.useEffect(()=>(window.addEventListener("popstate",handleLocationChange),()=>{window.removeEventListener("popstate",handleLocationChange)})),overwriteTheme};function getProviderThemeProps(theme,customBreakpoints){switch(theme){case ThemeVariants.TWILIO:return{...TwilioTheme,breakpoints:customBreakpoints\|\|TwilioTheme.breakpoints};case ThemeVariants.TWILIO_DARK:return{...TwilioDarkTheme,breakpoints:customBreakpoints\|\|TwilioDarkTheme.breakpoints};case ThemeVariants.DARK:return{...DarkTheme,breakpoints:customBreakpoints\|\|DarkTheme.breakpoints};case ThemeVariants.SENDGRID:return{...SendGridTheme,breakpoints:customBreakpoints\|\|SendGridTheme.breakpoints};case ThemeVariants.EVERGREEN:return{...EvergreenTheme,breakpoints:customBreakpoints\|\|EvergreenTheme.breakpoints};case ThemeVariants.DEFAULT:default:return{...DefaultTheme,breakpoints:customBreakpoints\|\|DefaultTheme.breakpoints}}}var ThemeProvider=({customBreakpoints,theme=ThemeVariants.DEFAULT,disableAnimations=!1,cacheProviderProps,...props})=>{let[cache]=React2.useState(cacheProviderProps?(0,import_styling_library5.createCache)(cacheProviderProps):null),prefersReducedMotion=(0,import_animation_library.useReducedMotion)();React2.useMemo(()=>{import_animation_library.Globals.assign({skipAnimation:disableAnimations\|\|prefersReducedMotion})},[disableAnimations,prefersReducedMotion]);let overwriteTheme=useThemeOverwriteHook(),providerThemeProps=getProviderThemeProps(overwriteTheme\|\|theme,customBreakpoints);return cache?React2.createElement(import_styling_library5.CacheProvider,{value:cache},React2.createElement(import_styling_library5.ThemeProvider,{theme:providerThemeProps},React2.createElement(import_styling_library5.StylingGlobals,{styles:pasteGlobalStyles({theme:providerThemeProps})}),React2.createElement(import_styling_library5.StylingGlobals,{styles:pasteFonts}),React2.createElement(StyledBase,{className:"paste-theme-provider",...props}))):React2.createElement(import_styling_library5.ThemeProvider,{theme:providerThemeProps},React2.createElement(import_styling_library5.StylingGlobals,{styles:pasteGlobalStyles({theme:providerThemeProps})}),React2.createElement(import_styling_library5.StylingGlobals,{styles:pasteFonts}),React2.createElement(StyledBase,{className:"paste-theme-provider",...props}))};ThemeProvider.displayName="PasteThemeProvider";var import_styling_library6=require("@twilio-paste/styling-library");var import_styling_library7=require("@twilio-paste/styling-library"),React3=__toESM(require("react")),useTheme=()=>{let context=React3.useContext(import_styling_library7.ThemeContext);if(!context)throw new Error("[useHook]: must be used within the @twilio-paste/theme provider");return context};var generateTokensFromTheme=({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,colorSchemes:colorSchemes7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,shadows,sizes,space,textColors:textColors7,zIndices:zIndices7,dataVisualization:dataVisualization7})=>({boxShadows:shadows,borderWidths:borderWidths7,radii:radii7,textColors:textColors7,borderColors:borderColors7,backgroundColors:backgroundColors7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,sizings:sizes,spacings:space,zIndices:zIndices7,colorSchemes:colorSchemes7,colors:{},dataVisualization:dataVisualization7});var import_color_contrast_utils=require("@twilio-paste/color-contrast-utils");var useThemeContrastCheck=()=>{let theme=useTheme(),designTokens=generateTokensFromTheme(theme),textContrastRating=(0,import_color_contrast_utils.getContrastRatingsOfTokensWithTextContrastRequirements)(designTokens),uiControlContrastRating=(0,import_color_contrast_utils.getContrastRatingsOfTokensWithUIControlContrastRequirements)(designTokens),numberOfTextFailures=(0,import_color_contrast_utils.getNumberOfTextFailures)(textContrastRating),numberOfUIControlFailures=(0,import_color_contrast_utils.getNumberOfUIControlFailures)(uiControlContrastRating),totalFailures=numberOfTextFailures+numberOfUIControlFailures;return{textContrastRating,uiControlContrastRating,numberOfTextFailures,numberOfUIControlFailures,totalFailures}};var Theme={Provider:ThemeProvider,Consumer:ThemeConsumer};

+1

-1

dist/utils/remToPx.d.ts.map

		@@ -1,1 +0,1 @@
		{"version":3,"file":"remToPx.d.ts","sourceRoot":"","sources":["../../src/utils/remToPx.ts"],"names":[],"mappings":"AAGA,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AACjC,KAAK,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpC,eAAO,MAAM,OAAO,QAAS,SAAS,SAAQ,QAAQ,KAAc,SAMnE,CAAC"}
		{"version":3,"file":"remToPx.d.ts","sourceRoot":"","sources":["../../src/utils/remToPx.ts"],"names":[],"mappings":"AAGA,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;AACjC,KAAK,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEpC,eAAO,MAAM,OAAO,QAAS,SAAS,SAAQ,QAAQ,KAAc,SAcnE,CAAC"}

+2

-2

package.json

		{
		"name": "@twilio-paste/theme",
		"version": "11.1.0",
		"version": "11.1.1",
		"description": "Paste Design System Theme Package which provides support for APIs to theme UIs and components.",
		@@ -38,3 +38,3 @@ "author": "Twilio Inc.",
		"@twilio-paste/color-contrast-utils": "^5.0.0",
		"@twilio-paste/design-tokens": "^10.4.1",
		"@twilio-paste/design-tokens": "^10.11.1",
		"@twilio-paste/styling-library": "^3.0.0",
		@@ -41,0 +41,0 @@ "@twilio-paste/types": "^6.0.0",

dist/tsconfig.tsbuildinfo

Sorry, the diff of this file is not supported yet

@twilio-paste/theme - npm Package Compare versions

Improved metrics