Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
@twilio-paste/theme
Advanced tools
@twilio-paste/theme - npm Package Compare versions
| export declare const CSSVariablesTheme: import("../..").GenericThemeShape; | ||
| //# sourceMappingURL=index.d.ts.map |
| {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/css-variables/index.ts"],"names":[],"mappings":"AAuCA,eAAO,MAAM,iBAAiB,mCAmB7B,CAAC"} |
| import type { BackgroundColorsKeys, BorderColorsKeys, BorderWidthsKeys, BoxShadowsKeys, ColorSchemeKeys, ColorsKeys, DataVisualizationKeys, FontSizesKeys, FontWeightsKeys, FontsKeys, GenericThemeShape, LineHeightsKeys, RadiiKeys, SizingKeys, SpacingsKeys, TextColorsKeys, ZIndicesKeys } from "./types/GenericThemeShape"; | ||
| interface GenerateThemeFromTokensArgs { | ||
| export interface GenerateThemeFromTokensArgs { | ||
| backgroundColors: Partial<{ | ||
@@ -53,3 +53,2 @@ [key in BackgroundColorsKeys]: any; | ||
| export declare const generateThemeFromTokens: ({ backgroundColors, borderColors, borderWidths, dataVisualization, colorSchemes, radii, fonts, fontSizes, fontWeights, lineHeights, boxShadows, sizings, spacings, textColors, zIndices, }: GenerateThemeFromTokensArgs) => GenericThemeShape; | ||
| export {}; | ||
| //# sourceMappingURL=generateThemeFromTokens.d.ts.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"file":"generateThemeFromTokens.d.ts","sourceRoot":"","sources":["../src/generateThemeFromTokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,aAAa,EACb,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,UAAU,EACV,YAAY,EACZ,cAAc,EACd,YAAY,EACb,MAAM,2BAA2B,CAAC;AAGnC,UAAU,2BAA2B;IACnC,gBAAgB,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,oBAAoB,GAAG,GAAG;KAAE,CAAC,CAAC;IAClE,YAAY,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,gBAAgB,GAAG,GAAG;KAAE,CAAC,CAAC;IAC1D,YAAY,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,gBAAgB,GAAG,GAAG;KAAE,CAAC,CAAC;IAC1D,KAAK,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,SAAS,GAAG,GAAG;KAAE,CAAC,CAAC;IAC5C,KAAK,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,SAAS,GAAG,GAAG;KAAE,CAAC,CAAC;IAC5C,SAAS,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,aAAa,GAAG,GAAG;KAAE,CAAC,CAAC;IACpD,WAAW,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,eAAe,GAAG,GAAG;KAAE,CAAC,CAAC;IACxD,WAAW,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,eAAe,GAAG,GAAG;KAAE,CAAC,CAAC;IACxD,UAAU,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,cAAc,GAAG,GAAG;KAAE,CAAC,CAAC;IAEtD,OAAO,EAAE;SAAG,GAAG,IAAI,UAAU,GAAG,GAAG;KAAE,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,YAAY,GAAG,GAAG;KAAE,CAAC,CAAC;IAClD,UAAU,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,cAAc,GAAG,GAAG;KAAE,CAAC,CAAC;IACtD,QAAQ,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,YAAY,GAAG,GAAG;KAAE,CAAC,CAAC;IAClD,MAAM,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,UAAU,GAAG,GAAG;KAAE,CAAC,CAAC;IAC9C,YAAY,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,eAAe,GAAG,GAAG;KAAE,CAAC,CAAC;IACzD,iBAAiB,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,qBAAqB,GAAG,GAAG;KAAE,CAAC,CAAC;CACrE;AAED,eAAO,MAAM,uBAAuB,+LAgBjC,2BAA2B,KAAG,iBA8ChC,CAAC"} | ||
| {"version":3,"file":"generateThemeFromTokens.d.ts","sourceRoot":"","sources":["../src/generateThemeFromTokens.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,UAAU,EACV,qBAAqB,EACrB,aAAa,EACb,eAAe,EACf,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,SAAS,EACT,UAAU,EACV,YAAY,EACZ,cAAc,EACd,YAAY,EACb,MAAM,2BAA2B,CAAC;AAGnC,MAAM,WAAW,2BAA2B;IAC1C,gBAAgB,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,oBAAoB,GAAG,GAAG;KAAE,CAAC,CAAC;IAClE,YAAY,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,gBAAgB,GAAG,GAAG;KAAE,CAAC,CAAC;IAC1D,YAAY,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,gBAAgB,GAAG,GAAG;KAAE,CAAC,CAAC;IAC1D,KAAK,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,SAAS,GAAG,GAAG;KAAE,CAAC,CAAC;IAC5C,KAAK,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,SAAS,GAAG,GAAG;KAAE,CAAC,CAAC;IAC5C,SAAS,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,aAAa,GAAG,GAAG;KAAE,CAAC,CAAC;IACpD,WAAW,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,eAAe,GAAG,GAAG;KAAE,CAAC,CAAC;IACxD,WAAW,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,eAAe,GAAG,GAAG;KAAE,CAAC,CAAC;IACxD,UAAU,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,cAAc,GAAG,GAAG;KAAE,CAAC,CAAC;IAEtD,OAAO,EAAE;SAAG,GAAG,IAAI,UAAU,GAAG,GAAG;KAAE,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,YAAY,GAAG,GAAG;KAAE,CAAC,CAAC;IAClD,UAAU,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,cAAc,GAAG,GAAG;KAAE,CAAC,CAAC;IACtD,QAAQ,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,YAAY,GAAG,GAAG;KAAE,CAAC,CAAC;IAClD,MAAM,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,UAAU,GAAG,GAAG;KAAE,CAAC,CAAC;IAC9C,YAAY,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,eAAe,GAAG,GAAG;KAAE,CAAC,CAAC;IACzD,iBAAiB,EAAE,OAAO,CAAC;SAAG,GAAG,IAAI,qBAAqB,GAAG,GAAG;KAAE,CAAC,CAAC;CACrE;AAED,eAAO,MAAM,uBAAuB,+LAgBjC,2BAA2B,KAAG,iBAgDhC,CAAC"} |
+142
-76
@@ -441,2 +441,5 @@ // src/themeConsumer.tsx | ||
| // src/generateThemeFromTokens.ts | ||
| import { sizings as fallbackSizings } from "@twilio-paste/design-tokens/dist/themes/twilio/tokens.es6"; | ||
| // src/utils/remToPx.ts | ||
@@ -458,60 +461,61 @@ var PX_PER_REM = 16; | ||
| 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 | ||
| backgroundColors: backgroundColors8, | ||
| borderColors: borderColors8, | ||
| borderWidths: borderWidths8, | ||
| dataVisualization: dataVisualization8, | ||
| colorSchemes: colorSchemes8, | ||
| radii: radii8, | ||
| fonts: fonts8, | ||
| fontSizes: fontSizes8, | ||
| fontWeights: fontWeights8, | ||
| lineHeights: lineHeights8, | ||
| boxShadows: boxShadows8, | ||
| sizings: sizings8, | ||
| spacings: spacings8, | ||
| textColors: textColors8, | ||
| zIndices: zIndices8 | ||
| }) => { | ||
| const sizingsForBreakpoints = sizings8.size0.includes("var") ? fallbackSizings : sizings8; | ||
| const breakpoints = [ | ||
| remToPx(sizings7.size40, "string"), | ||
| remToPx(sizings7.size100, "string"), | ||
| remToPx(sizings7.size120, "string") | ||
| remToPx(sizingsForBreakpoints.size40, "string"), | ||
| remToPx(sizingsForBreakpoints.size100, "string"), | ||
| remToPx(sizingsForBreakpoints.size120, "string") | ||
| ]; | ||
| return { | ||
| shadows: boxShadows7, | ||
| borderWidths: borderWidths7, | ||
| radii: radii7, | ||
| shadows: boxShadows8, | ||
| borderWidths: borderWidths8, | ||
| radii: radii8, | ||
| 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, | ||
| textColors: textColors8, | ||
| colorSchemes: colorSchemes8, | ||
| borderColors: borderColors8, | ||
| backgroundColors: backgroundColors8, | ||
| fonts: fonts8, | ||
| fontSizes: fontSizes8, | ||
| fontWeights: fontWeights8, | ||
| lineHeights: lineHeights8, | ||
| widths: sizings8, | ||
| maxWidths: sizings8, | ||
| minWidths: sizings8, | ||
| heights: sizings8, | ||
| maxHeights: sizings8, | ||
| minHeights: sizings8, | ||
| sizes: sizings8, | ||
| 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 | ||
| sizeIcon05: sizings8.sizeIcon05, | ||
| sizeIcon10: sizings8.sizeIcon10, | ||
| sizeIcon20: sizings8.sizeIcon20, | ||
| sizeIcon30: sizings8.sizeIcon30, | ||
| sizeIcon40: sizings8.sizeIcon40, | ||
| sizeIcon50: sizings8.sizeIcon50, | ||
| sizeIcon60: sizings8.sizeIcon60, | ||
| sizeIcon70: sizings8.sizeIcon70, | ||
| sizeIcon80: sizings8.sizeIcon80, | ||
| sizeIcon90: sizings8.sizeIcon90, | ||
| sizeIcon100: sizings8.sizeIcon100, | ||
| sizeIcon110: sizings8.sizeIcon110 | ||
| }, | ||
| space: spacings7, | ||
| zIndices: zIndices7, | ||
| dataVisualization: dataVisualization7 | ||
| space: spacings8, | ||
| zIndices: zIndices8, | ||
| dataVisualization: dataVisualization8 | ||
| }; | ||
@@ -733,2 +737,54 @@ }; | ||
| // src/themes/css-variables/index.ts | ||
| import { | ||
| backgroundColors as backgroundColors7, | ||
| borderColors as borderColors7, | ||
| borderWidths as borderWidths7, | ||
| boxShadows as boxShadows7, | ||
| colorSchemes as colorSchemes7, | ||
| colors as colors7, | ||
| dataVisualization as dataVisualization7, | ||
| fontSizes as fontSizes7, | ||
| fontWeights as fontWeights7, | ||
| fonts as fonts7, | ||
| lineHeights as lineHeights7, | ||
| radii as radii7, | ||
| sizings as sizings7, | ||
| spacings as spacings7, | ||
| textColors as textColors7, | ||
| zIndices as zIndices7 | ||
| } from "@twilio-paste/design-tokens/dist/tokens.es6"; | ||
| var convertToCSSVariables = (tokens) => { | ||
| const cssVariables = {}; | ||
| for (const [key, value] of Object.entries(tokens)) { | ||
| if (typeof value === "object") { | ||
| cssVariables[key] = convertToCSSVariables(value); | ||
| } else { | ||
| const cssVariableName = `--${key.replace(/([A-Z])/g, "-$1").replace(/(\d+)/g, "-$1").toLowerCase()}`; | ||
| cssVariables[key] = `var(${cssVariableName})`; | ||
| } | ||
| } | ||
| return cssVariables; | ||
| }; | ||
| var CSSVariablesTheme = generateThemeFromTokens( | ||
| convertToCSSVariables({ | ||
| backgroundColors: backgroundColors7, | ||
| borderColors: borderColors7, | ||
| borderWidths: borderWidths7, | ||
| radii: radii7, | ||
| fonts: fonts7, | ||
| fontSizes: fontSizes7, | ||
| fontWeights: fontWeights7, | ||
| lineHeights: lineHeights7, | ||
| boxShadows: boxShadows7, | ||
| sizings: sizings7, | ||
| spacings: spacings7, | ||
| textColors: textColors7, | ||
| zIndices: zIndices7, | ||
| dataVisualization: dataVisualization7, | ||
| colors: colors7, | ||
| colorSchemes: colorSchemes7 | ||
| }) | ||
| ); | ||
| // src/utils/getThemeFromHash.ts | ||
@@ -747,2 +803,3 @@ var getThemeFromHash = () => { | ||
| var StyledBase = styled.div(pasteBaseStyles); | ||
| var CSSVariablesThemeKey = "CSSVariables"; | ||
| var useThemeOverwriteHook = () => { | ||
@@ -788,2 +845,7 @@ const [overwriteTheme, setOverwriteTheme] = React2.useState(getThemeFromHash()); | ||
| }; | ||
| case CSSVariablesThemeKey: | ||
| return { | ||
| ...CSSVariablesTheme, | ||
| breakpoints: customBreakpoints || CSSVariablesTheme.breakpoints | ||
| }; | ||
| case ThemeVariants.DEFAULT: | ||
@@ -802,2 +864,3 @@ default: | ||
| cacheProviderProps, | ||
| useCSSVariables, | ||
| ...props | ||
@@ -813,3 +876,6 @@ }) => { | ||
| const overwriteTheme = useThemeOverwriteHook(); | ||
| const providerThemeProps = getProviderThemeProps(overwriteTheme || theme, customBreakpoints); | ||
| const providerThemeProps = getProviderThemeProps( | ||
| overwriteTheme || (useCSSVariables ? CSSVariablesThemeKey : theme), | ||
| customBreakpoints | ||
| ); | ||
| if (cache) { | ||
@@ -838,35 +904,35 @@ return /* @__PURE__ */ React2.createElement(EmotionCacheProvider, { value: cache }, /* @__PURE__ */ React2.createElement(EmotionThemeProvider, { theme: providerThemeProps }, /* @__PURE__ */ React2.createElement(StylingGlobals, { styles: pasteGlobalStyles({ theme: providerThemeProps }) }), /* @__PURE__ */ React2.createElement(StylingGlobals, { styles: pasteFonts }), /* @__PURE__ */ React2.createElement(StyledBase, { className: "paste-theme-provider", ...props }))); | ||
| var generateTokensFromTheme = ({ | ||
| backgroundColors: backgroundColors7, | ||
| borderColors: borderColors7, | ||
| borderWidths: borderWidths7, | ||
| colorSchemes: colorSchemes7, | ||
| radii: radii7, | ||
| fonts: fonts7, | ||
| fontSizes: fontSizes7, | ||
| fontWeights: fontWeights7, | ||
| lineHeights: lineHeights7, | ||
| backgroundColors: backgroundColors8, | ||
| borderColors: borderColors8, | ||
| borderWidths: borderWidths8, | ||
| colorSchemes: colorSchemes8, | ||
| radii: radii8, | ||
| fonts: fonts8, | ||
| fontSizes: fontSizes8, | ||
| fontWeights: fontWeights8, | ||
| lineHeights: lineHeights8, | ||
| shadows, | ||
| sizes, | ||
| space, | ||
| textColors: textColors7, | ||
| zIndices: zIndices7, | ||
| dataVisualization: dataVisualization7 | ||
| textColors: textColors8, | ||
| zIndices: zIndices8, | ||
| dataVisualization: dataVisualization8 | ||
| }) => { | ||
| return { | ||
| boxShadows: shadows, | ||
| borderWidths: borderWidths7, | ||
| radii: radii7, | ||
| textColors: textColors7, | ||
| borderColors: borderColors7, | ||
| backgroundColors: backgroundColors7, | ||
| fonts: fonts7, | ||
| fontSizes: fontSizes7, | ||
| fontWeights: fontWeights7, | ||
| lineHeights: lineHeights7, | ||
| borderWidths: borderWidths8, | ||
| radii: radii8, | ||
| textColors: textColors8, | ||
| borderColors: borderColors8, | ||
| backgroundColors: backgroundColors8, | ||
| fonts: fonts8, | ||
| fontSizes: fontSizes8, | ||
| fontWeights: fontWeights8, | ||
| lineHeights: lineHeights8, | ||
| sizings: sizes, | ||
| spacings: space, | ||
| zIndices: zIndices7, | ||
| colorSchemes: colorSchemes7, | ||
| zIndices: zIndices8, | ||
| colorSchemes: colorSchemes8, | ||
| colors: {}, | ||
| dataVisualization: dataVisualization7 | ||
| dataVisualization: dataVisualization8 | ||
| }; | ||
@@ -873,0 +939,0 @@ }; |
+170
-121
@@ -466,4 +466,7 @@ "use strict"; | ||
| // src/themes/dark/index.ts | ||
| var import_tokens = require("@twilio-paste/design-tokens/dist/themes/dark/tokens.common"); | ||
| var import_tokens2 = require("@twilio-paste/design-tokens/dist/themes/dark/tokens.common"); | ||
| // src/generateThemeFromTokens.ts | ||
| var import_tokens = require("@twilio-paste/design-tokens/dist/themes/twilio/tokens.common"); | ||
| // src/utils/remToPx.ts | ||
@@ -485,60 +488,61 @@ var PX_PER_REM = 16; | ||
| 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 | ||
| backgroundColors: backgroundColors8, | ||
| borderColors: borderColors8, | ||
| borderWidths: borderWidths8, | ||
| dataVisualization: dataVisualization8, | ||
| colorSchemes: colorSchemes8, | ||
| radii: radii8, | ||
| fonts: fonts8, | ||
| fontSizes: fontSizes8, | ||
| fontWeights: fontWeights8, | ||
| lineHeights: lineHeights8, | ||
| boxShadows: boxShadows8, | ||
| sizings: sizings8, | ||
| spacings: spacings8, | ||
| textColors: textColors8, | ||
| zIndices: zIndices8 | ||
| }) => { | ||
| const sizingsForBreakpoints = sizings8.size0.includes("var") ? import_tokens.sizings : sizings8; | ||
| const breakpoints = [ | ||
| remToPx(sizings7.size40, "string"), | ||
| remToPx(sizings7.size100, "string"), | ||
| remToPx(sizings7.size120, "string") | ||
| remToPx(sizingsForBreakpoints.size40, "string"), | ||
| remToPx(sizingsForBreakpoints.size100, "string"), | ||
| remToPx(sizingsForBreakpoints.size120, "string") | ||
| ]; | ||
| return { | ||
| shadows: boxShadows7, | ||
| borderWidths: borderWidths7, | ||
| radii: radii7, | ||
| shadows: boxShadows8, | ||
| borderWidths: borderWidths8, | ||
| radii: radii8, | ||
| 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, | ||
| textColors: textColors8, | ||
| colorSchemes: colorSchemes8, | ||
| borderColors: borderColors8, | ||
| backgroundColors: backgroundColors8, | ||
| fonts: fonts8, | ||
| fontSizes: fontSizes8, | ||
| fontWeights: fontWeights8, | ||
| lineHeights: lineHeights8, | ||
| widths: sizings8, | ||
| maxWidths: sizings8, | ||
| minWidths: sizings8, | ||
| heights: sizings8, | ||
| maxHeights: sizings8, | ||
| minHeights: sizings8, | ||
| sizes: sizings8, | ||
| 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 | ||
| sizeIcon05: sizings8.sizeIcon05, | ||
| sizeIcon10: sizings8.sizeIcon10, | ||
| sizeIcon20: sizings8.sizeIcon20, | ||
| sizeIcon30: sizings8.sizeIcon30, | ||
| sizeIcon40: sizings8.sizeIcon40, | ||
| sizeIcon50: sizings8.sizeIcon50, | ||
| sizeIcon60: sizings8.sizeIcon60, | ||
| sizeIcon70: sizings8.sizeIcon70, | ||
| sizeIcon80: sizings8.sizeIcon80, | ||
| sizeIcon90: sizings8.sizeIcon90, | ||
| sizeIcon100: sizings8.sizeIcon100, | ||
| sizeIcon110: sizings8.sizeIcon110 | ||
| }, | ||
| space: spacings7, | ||
| zIndices: zIndices7, | ||
| dataVisualization: dataVisualization7 | ||
| space: spacings8, | ||
| zIndices: zIndices8, | ||
| dataVisualization: dataVisualization8 | ||
| }; | ||
@@ -549,18 +553,18 @@ }; | ||
| 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 | ||
| 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 | ||
| }); | ||
@@ -590,25 +594,4 @@ | ||
| // src/themes/evergreen/index.ts | ||
| var import_tokens2 = require("@twilio-paste/design-tokens/dist/themes/evergreen/tokens.common"); | ||
| var import_tokens3 = 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 | ||
| }); | ||
| // src/themes/sendgrid/index.ts | ||
| var import_tokens3 = require("@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.common"); | ||
| var SendGridTheme = generateThemeFromTokens({ | ||
| backgroundColors: import_tokens3.backgroundColors, | ||
@@ -632,5 +615,5 @@ borderColors: import_tokens3.borderColors, | ||
| // src/themes/twilio/index.ts | ||
| var import_tokens4 = require("@twilio-paste/design-tokens/dist/themes/twilio/tokens.common"); | ||
| var TwilioTheme = generateThemeFromTokens({ | ||
| // src/themes/sendgrid/index.ts | ||
| var import_tokens4 = require("@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.common"); | ||
| var SendGridTheme = generateThemeFromTokens({ | ||
| backgroundColors: import_tokens4.backgroundColors, | ||
@@ -654,5 +637,5 @@ borderColors: import_tokens4.borderColors, | ||
| // src/themes/twilio-dark/index.ts | ||
| var import_tokens5 = require("@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.common"); | ||
| var TwilioDarkTheme = generateThemeFromTokens({ | ||
| // src/themes/twilio/index.ts | ||
| var import_tokens5 = require("@twilio-paste/design-tokens/dist/themes/twilio/tokens.common"); | ||
| var TwilioTheme = generateThemeFromTokens({ | ||
| backgroundColors: import_tokens5.backgroundColors, | ||
@@ -676,5 +659,61 @@ borderColors: import_tokens5.borderColors, | ||
| // src/themes/twilio-dark/index.ts | ||
| var import_tokens6 = require("@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.common"); | ||
| var TwilioDarkTheme = generateThemeFromTokens({ | ||
| backgroundColors: import_tokens6.backgroundColors, | ||
| borderColors: import_tokens6.borderColors, | ||
| borderWidths: import_tokens6.borderWidths, | ||
| radii: import_tokens6.radii, | ||
| fonts: import_tokens6.fonts, | ||
| fontSizes: import_tokens6.fontSizes, | ||
| fontWeights: import_tokens6.fontWeights, | ||
| lineHeights: import_tokens6.lineHeights, | ||
| boxShadows: import_tokens6.boxShadows, | ||
| sizings: import_tokens6.sizings, | ||
| spacings: import_tokens6.spacings, | ||
| textColors: import_tokens6.textColors, | ||
| zIndices: import_tokens6.zIndices, | ||
| dataVisualization: import_tokens6.dataVisualization, | ||
| colors: import_tokens6.colors, | ||
| colorSchemes: import_tokens6.colorSchemes | ||
| }); | ||
| // src/themes/index.ts | ||
| var ConsoleTheme = DefaultTheme; | ||
| // src/themes/css-variables/index.ts | ||
| var import_tokens7 = require("@twilio-paste/design-tokens/dist/tokens.common"); | ||
| var convertToCSSVariables = (tokens) => { | ||
| const cssVariables = {}; | ||
| for (const [key, value] of Object.entries(tokens)) { | ||
| if (typeof value === "object") { | ||
| cssVariables[key] = convertToCSSVariables(value); | ||
| } else { | ||
| const cssVariableName = `--${key.replace(/([A-Z])/g, "-$1").replace(/(\d+)/g, "-$1").toLowerCase()}`; | ||
| cssVariables[key] = `var(${cssVariableName})`; | ||
| } | ||
| } | ||
| return cssVariables; | ||
| }; | ||
| var CSSVariablesTheme = generateThemeFromTokens( | ||
| convertToCSSVariables({ | ||
| backgroundColors: import_tokens7.backgroundColors, | ||
| borderColors: import_tokens7.borderColors, | ||
| borderWidths: import_tokens7.borderWidths, | ||
| radii: import_tokens7.radii, | ||
| fonts: import_tokens7.fonts, | ||
| fontSizes: import_tokens7.fontSizes, | ||
| fontWeights: import_tokens7.fontWeights, | ||
| lineHeights: import_tokens7.lineHeights, | ||
| boxShadows: import_tokens7.boxShadows, | ||
| sizings: import_tokens7.sizings, | ||
| spacings: import_tokens7.spacings, | ||
| textColors: import_tokens7.textColors, | ||
| zIndices: import_tokens7.zIndices, | ||
| dataVisualization: import_tokens7.dataVisualization, | ||
| colors: import_tokens7.colors, | ||
| colorSchemes: import_tokens7.colorSchemes | ||
| }) | ||
| ); | ||
| // src/utils/getThemeFromHash.ts | ||
@@ -693,2 +732,3 @@ var getThemeFromHash = () => { | ||
| var StyledBase = import_styling_library5.styled.div(pasteBaseStyles); | ||
| var CSSVariablesThemeKey = "CSSVariables"; | ||
| var useThemeOverwriteHook = () => { | ||
@@ -734,2 +774,7 @@ const [overwriteTheme, setOverwriteTheme] = React2.useState(getThemeFromHash()); | ||
| }; | ||
| case CSSVariablesThemeKey: | ||
| return { | ||
| ...CSSVariablesTheme, | ||
| breakpoints: customBreakpoints || CSSVariablesTheme.breakpoints | ||
| }; | ||
| case ThemeVariants.DEFAULT: | ||
@@ -748,2 +793,3 @@ default: | ||
| cacheProviderProps, | ||
| useCSSVariables, | ||
| ...props | ||
@@ -759,3 +805,6 @@ }) => { | ||
| const overwriteTheme = useThemeOverwriteHook(); | ||
| const providerThemeProps = getProviderThemeProps(overwriteTheme || theme, customBreakpoints); | ||
| const providerThemeProps = getProviderThemeProps( | ||
| overwriteTheme || (useCSSVariables ? CSSVariablesThemeKey : theme), | ||
| customBreakpoints | ||
| ); | ||
| if (cache) { | ||
@@ -784,35 +833,35 @@ return /* @__PURE__ */ React2.createElement(import_styling_library5.CacheProvider, { value: cache }, /* @__PURE__ */ React2.createElement(import_styling_library5.ThemeProvider, { theme: providerThemeProps }, /* @__PURE__ */ React2.createElement(import_styling_library5.StylingGlobals, { styles: pasteGlobalStyles({ theme: providerThemeProps }) }), /* @__PURE__ */ React2.createElement(import_styling_library5.StylingGlobals, { styles: pasteFonts }), /* @__PURE__ */ React2.createElement(StyledBase, { className: "paste-theme-provider", ...props }))); | ||
| var generateTokensFromTheme = ({ | ||
| backgroundColors: backgroundColors7, | ||
| borderColors: borderColors7, | ||
| borderWidths: borderWidths7, | ||
| colorSchemes: colorSchemes7, | ||
| radii: radii7, | ||
| fonts: fonts7, | ||
| fontSizes: fontSizes7, | ||
| fontWeights: fontWeights7, | ||
| lineHeights: lineHeights7, | ||
| backgroundColors: backgroundColors8, | ||
| borderColors: borderColors8, | ||
| borderWidths: borderWidths8, | ||
| colorSchemes: colorSchemes8, | ||
| radii: radii8, | ||
| fonts: fonts8, | ||
| fontSizes: fontSizes8, | ||
| fontWeights: fontWeights8, | ||
| lineHeights: lineHeights8, | ||
| shadows, | ||
| sizes, | ||
| space, | ||
| textColors: textColors7, | ||
| zIndices: zIndices7, | ||
| dataVisualization: dataVisualization7 | ||
| textColors: textColors8, | ||
| zIndices: zIndices8, | ||
| dataVisualization: dataVisualization8 | ||
| }) => { | ||
| return { | ||
| boxShadows: shadows, | ||
| borderWidths: borderWidths7, | ||
| radii: radii7, | ||
| textColors: textColors7, | ||
| borderColors: borderColors7, | ||
| backgroundColors: backgroundColors7, | ||
| fonts: fonts7, | ||
| fontSizes: fontSizes7, | ||
| fontWeights: fontWeights7, | ||
| lineHeights: lineHeights7, | ||
| borderWidths: borderWidths8, | ||
| radii: radii8, | ||
| textColors: textColors8, | ||
| borderColors: borderColors8, | ||
| backgroundColors: backgroundColors8, | ||
| fonts: fonts8, | ||
| fontSizes: fontSizes8, | ||
| fontWeights: fontWeights8, | ||
| lineHeights: lineHeights8, | ||
| sizings: sizes, | ||
| spacings: space, | ||
| zIndices: zIndices7, | ||
| colorSchemes: colorSchemes7, | ||
| zIndices: zIndices8, | ||
| colorSchemes: colorSchemes8, | ||
| colors: {}, | ||
| dataVisualization: dataVisualization7 | ||
| dataVisualization: dataVisualization8 | ||
| }; | ||
@@ -819,0 +868,0 @@ }; |
+1
-1
@@ -323,2 +323,2 @@ import{ThemeContext}from"@twilio-paste/styling-library";import*as 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";import*as 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"&&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,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";import*as 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";import{sizings as fallbackSizings}from"@twilio-paste/design-tokens/dist/themes/twilio/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(remValue*16);return type==="number"?pxValue:`${pxValue}px`};var generateThemeFromTokens=({backgroundColors:backgroundColors8,borderColors:borderColors8,borderWidths:borderWidths8,dataVisualization:dataVisualization8,colorSchemes:colorSchemes8,radii:radii8,fonts:fonts8,fontSizes:fontSizes8,fontWeights:fontWeights8,lineHeights:lineHeights8,boxShadows:boxShadows8,sizings:sizings8,spacings:spacings8,textColors:textColors8,zIndices:zIndices8})=>{let sizingsForBreakpoints=sizings8.size0.includes("var")?fallbackSizings:sizings8,breakpoints=[remToPx(sizingsForBreakpoints.size40,"string"),remToPx(sizingsForBreakpoints.size100,"string"),remToPx(sizingsForBreakpoints.size120,"string")];return{shadows:boxShadows8,borderWidths:borderWidths8,radii:radii8,breakpoints,textColors:textColors8,colorSchemes:colorSchemes8,borderColors:borderColors8,backgroundColors:backgroundColors8,fonts:fonts8,fontSizes:fontSizes8,fontWeights:fontWeights8,lineHeights:lineHeights8,widths:sizings8,maxWidths:sizings8,minWidths:sizings8,heights:sizings8,maxHeights:sizings8,minHeights:sizings8,sizes:sizings8,iconSizes:{sizeIcon05:sizings8.sizeIcon05,sizeIcon10:sizings8.sizeIcon10,sizeIcon20:sizings8.sizeIcon20,sizeIcon30:sizings8.sizeIcon30,sizeIcon40:sizings8.sizeIcon40,sizeIcon50:sizings8.sizeIcon50,sizeIcon60:sizings8.sizeIcon60,sizeIcon70:sizings8.sizeIcon70,sizeIcon80:sizings8.sizeIcon80,sizeIcon90:sizings8.sizeIcon90,sizeIcon100:sizings8.sizeIcon100,sizeIcon110:sizings8.sizeIcon110},space:spacings8,zIndices:zIndices8,dataVisualization:dataVisualization8}};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;import{backgroundColors as backgroundColors7,borderColors as borderColors7,borderWidths as borderWidths7,boxShadows as boxShadows7,colorSchemes as colorSchemes7,colors as colors7,dataVisualization as dataVisualization7,fontSizes as fontSizes7,fontWeights as fontWeights7,fonts as fonts7,lineHeights as lineHeights7,radii as radii7,sizings as sizings7,spacings as spacings7,textColors as textColors7,zIndices as zIndices7}from"@twilio-paste/design-tokens/dist/tokens.es6";var convertToCSSVariables=tokens=>{let cssVariables={};for(let[key,value]of Object.entries(tokens))if(typeof value=="object")cssVariables[key]=convertToCSSVariables(value);else{let cssVariableName=`--${key.replace(/([A-Z])/g,"-$1").replace(/(\d+)/g,"-$1").toLowerCase()}`;cssVariables[key]=`var(${cssVariableName})`}return cssVariables},CSSVariablesTheme=generateThemeFromTokens(convertToCSSVariables({backgroundColors:backgroundColors7,borderColors:borderColors7,borderWidths:borderWidths7,radii:radii7,fonts:fonts7,fontSizes:fontSizes7,fontWeights:fontWeights7,lineHeights:lineHeights7,boxShadows:boxShadows7,sizings:sizings7,spacings:spacings7,textColors:textColors7,zIndices:zIndices7,dataVisualization:dataVisualization7,colors:colors7,colorSchemes:colorSchemes7}));var getThemeFromHash=()=>{try{if(window.location.hash.includes("paste-theme-override"))return window.location.hash.split("=")[1]}catch{}};var StyledBase=styled.div(pasteBaseStyles),CSSVariablesThemeKey="CSSVariables",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 CSSVariablesThemeKey:return{...CSSVariablesTheme,breakpoints:customBreakpoints||CSSVariablesTheme.breakpoints};case ThemeVariants.DEFAULT:default:return{...DefaultTheme,breakpoints:customBreakpoints||DefaultTheme.breakpoints}}}var ThemeProvider=({customBreakpoints,theme=ThemeVariants.DEFAULT,disableAnimations=!1,cacheProviderProps,useCSSVariables,...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||(useCSSVariables?CSSVariablesThemeKey: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";import*as 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:backgroundColors8,borderColors:borderColors8,borderWidths:borderWidths8,colorSchemes:colorSchemes8,radii:radii8,fonts:fonts8,fontSizes:fontSizes8,fontWeights:fontWeights8,lineHeights:lineHeights8,shadows,sizes,space,textColors:textColors8,zIndices:zIndices8,dataVisualization:dataVisualization8})=>({boxShadows:shadows,borderWidths:borderWidths8,radii:radii8,textColors:textColors8,borderColors:borderColors8,backgroundColors:backgroundColors8,fonts:fonts8,fontSizes:fontSizes8,fontWeights:fontWeights8,lineHeights:lineHeights8,sizings:sizes,spacings:space,zIndices:zIndices8,colorSchemes:colorSchemes8,colors:{},dataVisualization:dataVisualization8});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
@@ -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"&&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}; | ||
| `;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_tokens2=require("@twilio-paste/design-tokens/dist/themes/dark/tokens.common");var import_tokens=require("@twilio-paste/design-tokens/dist/themes/twilio/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:backgroundColors8,borderColors:borderColors8,borderWidths:borderWidths8,dataVisualization:dataVisualization8,colorSchemes:colorSchemes8,radii:radii8,fonts:fonts8,fontSizes:fontSizes8,fontWeights:fontWeights8,lineHeights:lineHeights8,boxShadows:boxShadows8,sizings:sizings8,spacings:spacings8,textColors:textColors8,zIndices:zIndices8})=>{let sizingsForBreakpoints=sizings8.size0.includes("var")?import_tokens.sizings:sizings8,breakpoints=[remToPx(sizingsForBreakpoints.size40,"string"),remToPx(sizingsForBreakpoints.size100,"string"),remToPx(sizingsForBreakpoints.size120,"string")];return{shadows:boxShadows8,borderWidths:borderWidths8,radii:radii8,breakpoints,textColors:textColors8,colorSchemes:colorSchemes8,borderColors:borderColors8,backgroundColors:backgroundColors8,fonts:fonts8,fontSizes:fontSizes8,fontWeights:fontWeights8,lineHeights:lineHeights8,widths:sizings8,maxWidths:sizings8,minWidths:sizings8,heights:sizings8,maxHeights:sizings8,minHeights:sizings8,sizes:sizings8,iconSizes:{sizeIcon05:sizings8.sizeIcon05,sizeIcon10:sizings8.sizeIcon10,sizeIcon20:sizings8.sizeIcon20,sizeIcon30:sizings8.sizeIcon30,sizeIcon40:sizings8.sizeIcon40,sizeIcon50:sizings8.sizeIcon50,sizeIcon60:sizings8.sizeIcon60,sizeIcon70:sizings8.sizeIcon70,sizeIcon80:sizings8.sizeIcon80,sizeIcon90:sizings8.sizeIcon90,sizeIcon100:sizings8.sizeIcon100,sizeIcon110:sizings8.sizeIcon110},space:spacings8,zIndices:zIndices8,dataVisualization:dataVisualization8}};var DarkTheme=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_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_tokens3=require("@twilio-paste/design-tokens/dist/themes/evergreen/tokens.common");var EvergreenTheme=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/sendgrid/tokens.common");var SendGridTheme=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/tokens.common");var TwilioTheme=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 import_tokens6=require("@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.common");var TwilioDarkTheme=generateThemeFromTokens({backgroundColors:import_tokens6.backgroundColors,borderColors:import_tokens6.borderColors,borderWidths:import_tokens6.borderWidths,radii:import_tokens6.radii,fonts:import_tokens6.fonts,fontSizes:import_tokens6.fontSizes,fontWeights:import_tokens6.fontWeights,lineHeights:import_tokens6.lineHeights,boxShadows:import_tokens6.boxShadows,sizings:import_tokens6.sizings,spacings:import_tokens6.spacings,textColors:import_tokens6.textColors,zIndices:import_tokens6.zIndices,dataVisualization:import_tokens6.dataVisualization,colors:import_tokens6.colors,colorSchemes:import_tokens6.colorSchemes});var ConsoleTheme=DefaultTheme;var import_tokens7=require("@twilio-paste/design-tokens/dist/tokens.common");var convertToCSSVariables=tokens=>{let cssVariables={};for(let[key,value]of Object.entries(tokens))if(typeof value=="object")cssVariables[key]=convertToCSSVariables(value);else{let cssVariableName=`--${key.replace(/([A-Z])/g,"-$1").replace(/(\d+)/g,"-$1").toLowerCase()}`;cssVariables[key]=`var(${cssVariableName})`}return cssVariables},CSSVariablesTheme=generateThemeFromTokens(convertToCSSVariables({backgroundColors:import_tokens7.backgroundColors,borderColors:import_tokens7.borderColors,borderWidths:import_tokens7.borderWidths,radii:import_tokens7.radii,fonts:import_tokens7.fonts,fontSizes:import_tokens7.fontSizes,fontWeights:import_tokens7.fontWeights,lineHeights:import_tokens7.lineHeights,boxShadows:import_tokens7.boxShadows,sizings:import_tokens7.sizings,spacings:import_tokens7.spacings,textColors:import_tokens7.textColors,zIndices:import_tokens7.zIndices,dataVisualization:import_tokens7.dataVisualization,colors:import_tokens7.colors,colorSchemes:import_tokens7.colorSchemes}));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),CSSVariablesThemeKey="CSSVariables",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 CSSVariablesThemeKey:return{...CSSVariablesTheme,breakpoints:customBreakpoints||CSSVariablesTheme.breakpoints};case ThemeVariants.DEFAULT:default:return{...DefaultTheme,breakpoints:customBreakpoints||DefaultTheme.breakpoints}}}var ThemeProvider=({customBreakpoints,theme=ThemeVariants.DEFAULT,disableAnimations=!1,cacheProviderProps,useCSSVariables,...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||(useCSSVariables?CSSVariablesThemeKey: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:backgroundColors8,borderColors:borderColors8,borderWidths:borderWidths8,colorSchemes:colorSchemes8,radii:radii8,fonts:fonts8,fontSizes:fontSizes8,fontWeights:fontWeights8,lineHeights:lineHeights8,shadows,sizes,space,textColors:textColors8,zIndices:zIndices8,dataVisualization:dataVisualization8})=>({boxShadows:shadows,borderWidths:borderWidths8,radii:radii8,textColors:textColors8,borderColors:borderColors8,backgroundColors:backgroundColors8,fonts:fonts8,fontSizes:fontSizes8,fontWeights:fontWeights8,lineHeights:lineHeights8,sizings:sizes,spacings:space,zIndices:zIndices8,colorSchemes:colorSchemes8,colors:{},dataVisualization:dataVisualization8});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}; |
@@ -8,5 +8,4 @@ import type { CreateCacheOptions } from "@twilio-paste/styling-library"; | ||
| }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>; | ||
| export interface ThemeProviderProps { | ||
| interface BaseThemeProviderProps { | ||
| customBreakpoints?: string[]; | ||
| theme?: ThemeVariants; | ||
| disableAnimations?: boolean; | ||
@@ -16,4 +15,13 @@ cacheProviderProps?: CreateCacheOptions; | ||
| } | ||
| interface ThemeProviderThemeProps extends BaseThemeProviderProps { | ||
| theme?: ThemeVariants; | ||
| useCSSVariables?: never; | ||
| } | ||
| interface ThemeProviderCSSVariablesProps extends BaseThemeProviderProps { | ||
| theme?: never; | ||
| useCSSVariables?: boolean; | ||
| } | ||
| export type ThemeProviderProps = ThemeProviderThemeProps | ThemeProviderCSSVariablesProps; | ||
| declare const ThemeProvider: React.FunctionComponent<React.PropsWithChildren<ThemeProviderProps>>; | ||
| export { ThemeProvider }; | ||
| //# sourceMappingURL=themeProvider.d.ts.map |
@@ -1,1 +0,1 @@ | ||
| {"version":3,"file":"themeProvider.d.ts","sourceRoot":"","sources":["../src/themeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAO5C,eAAO,MAAM,UAAU;;;qFAA8B,CAAC;AAyDtD,MAAM,WAAW,kBAAkB;IACjC,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CAsCvF,CAAC;AAIF,OAAO,EAAE,aAAa,EAAE,CAAC"} | ||
| {"version":3,"file":"themeProvider.d.ts","sourceRoot":"","sources":["../src/themeProvider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAQ5C,eAAO,MAAM,UAAU;;;qFAA8B,CAAC;AAgEtD,UAAU,sBAAsB;IAC9B,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,UAAU,uBAAwB,SAAQ,sBAAsB;IAC9D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,eAAe,CAAC,EAAE,KAAK,CAAC;CACzB;AAED,UAAU,8BAA+B,SAAQ,sBAAsB;IACrE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,MAAM,kBAAkB,GAAG,uBAAuB,GAAG,8BAA8B,CAAC;AAE1F,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CA0CvF,CAAC;AAIF,OAAO,EAAE,aAAa,EAAE,CAAC"} |
+2
-2
| { | ||
| "name": "@twilio-paste/theme", | ||
| "version": "11.1.1", | ||
| "version": "11.2.0", | ||
| "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.11.1", | ||
| "@twilio-paste/design-tokens": "^10.14.0", | ||
| "@twilio-paste/styling-library": "^3.0.0", | ||
@@ -41,0 +41,0 @@ "@twilio-paste/types": "^6.0.0", |
Sorry, the diff of this file is not supported yet
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
276298
3.09%- Number of package files
55
3.77%- Lines of code
2872
4.78%No dependency changes