@razorpay/blade 12.30.0 → 12.31.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lib/native/components/Typography/Heading/Heading.js.map +1 -1
- package/build/lib/native/tokens/theme/createTheme.js +1 -1
- package/build/lib/native/tokens/theme/createTheme.js.map +1 -1
- package/build/lib/web/development/components/Typography/Heading/Heading.js.map +1 -1
- package/build/lib/web/development/tokens/theme/createTheme.js +12 -0
- package/build/lib/web/development/tokens/theme/createTheme.js.map +1 -1
- package/build/lib/web/production/components/Typography/Heading/Heading.js.map +1 -1
- package/build/lib/web/production/tokens/theme/createTheme.js +12 -0
- package/build/lib/web/production/tokens/theme/createTheme.js.map +1 -1
- package/build/types/components/index.d.ts +2 -2
- package/build/types/components/index.native.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","sources":["../../../../../../src/components/Typography/Heading/Heading.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport React from 'react';\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef, TestID } from '~utils/types';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type HeadingProps = {\n as?: typeof validAsValues[number];\n /**\n * Overrides the color of the Heading component.\n *\n * **Note** This takes priority over `type` and `contrast` prop to decide color of heading\n */\n color?: BaseTextProps['color'];\n weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;\n children: React.ReactNode;\n textAlign?: BaseTextProps['textAlign'];\n textDecorationLine?: BaseTextProps['textDecorationLine'];\n size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;\n wordBreak?: BaseTextProps['wordBreak'];\n} & TestID &\n StyledPropsBlade;\n\nexport const getHeadingProps = ({\n as,\n size,\n weight,\n color,\n testID,\n}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<\n BaseTextProps,\n 'children'\n> => {\n const props: Omit<BaseTextProps, 'children'> = {\n color,\n fontSize: 300,\n fontWeight: weight ?? 'semibold',\n fontStyle: 'normal',\n lineHeight: 300,\n fontFamily: 'heading',\n accessibilityProps: isReactNative() ? { role: 'heading' } : {},\n componentName: 'heading',\n testID,\n };\n\n if (size === 'small') {\n props.fontSize = 300;\n props.lineHeight = 300;\n props.as = 'h6';\n } else if (size === 'medium') {\n props.fontSize = 400;\n props.lineHeight = 400;\n props.as = 'h5';\n } else if (size === 'large') {\n props.fontSize = 500;\n props.lineHeight = 500;\n props.as = 'h4';\n } else if (size === 'xlarge') {\n props.fontSize = 600;\n props.lineHeight = 600;\n props.as = 'h3';\n } else if (size === '2xlarge') {\n props.fontSize = 700;\n props.lineHeight = 700;\n props.as = 'h2';\n }\n\n // override the computed `as` prop if user passed an `as` prop\n props.as = as || props.as;\n return props;\n};\n\nconst _Heading = (\n {\n as,\n size = 'small',\n weight = 'semibold',\n color = 'surface.text.gray.normal',\n children,\n testID,\n textAlign,\n textDecorationLine,\n wordBreak,\n ...styledProps\n }: HeadingProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n useValidateAsProp({ componentName: 'Heading', as, validAsValues });\n\n const props = getHeadingProps({ as, size, weight, color, testID });\n\n return (\n <BaseText\n {...props}\n ref={ref}\n textAlign={textAlign}\n textDecorationLine={textDecorationLine}\n wordBreak={wordBreak}\n {...getStyledProps(styledProps)}\n >\n {children}\n </BaseText>\n );\n};\n\nconst Heading = React.forwardRef(_Heading);\n\nexport { Heading };\n"],"names":["validAsValues","getHeadingProps","_ref","as","size","weight","color","testID","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","isReactNative","role","componentName","_Heading","_ref2","ref","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","wordBreak","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","Object","assign","getStyledProps","Heading","React","forwardRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Heading.js","sources":["../../../../../../src/components/Typography/Heading/Heading.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport React from 'react';\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef, TestID } from '~utils/types';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type HeadingProps = {\n as?: typeof validAsValues[number];\n /**\n * Overrides the color of the Heading component.\n *\n * **Note** This takes priority over `type` and `contrast` prop to decide color of heading\n */\n color?: BaseTextProps['color'];\n weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;\n children: React.ReactNode;\n textAlign?: BaseTextProps['textAlign'];\n textDecorationLine?: BaseTextProps['textDecorationLine'];\n size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;\n wordBreak?: BaseTextProps['wordBreak'];\n} & TestID &\n StyledPropsBlade;\n\nexport const getHeadingProps = ({\n as,\n size,\n weight,\n color,\n testID,\n}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<\n BaseTextProps,\n 'children'\n> => {\n const props: Omit<BaseTextProps, 'children'> = {\n color,\n fontSize: 300,\n fontWeight: weight ?? 'semibold',\n fontStyle: 'normal',\n lineHeight: 300,\n fontFamily: 'heading',\n accessibilityProps: isReactNative() ? { role: 'heading' } : {},\n componentName: 'heading',\n testID,\n };\n\n if (size === 'small') {\n props.fontSize = 300;\n props.lineHeight = 300;\n props.as = 'h6';\n } else if (size === 'medium') {\n props.fontSize = 400;\n props.lineHeight = 400;\n props.as = 'h5';\n } else if (size === 'large') {\n props.fontSize = 500;\n props.lineHeight = 500;\n props.as = 'h4';\n } else if (size === 'xlarge') {\n props.fontSize = 600;\n props.lineHeight = 600;\n props.as = 'h3';\n } else if (size === '2xlarge') {\n props.fontSize = 700;\n props.lineHeight = 700;\n props.as = 'h2';\n }\n\n // override the computed `as` prop if user passed an `as` prop\n props.as = as || props.as;\n return props;\n};\n\nconst _Heading = (\n {\n as,\n size = 'small',\n weight = 'semibold',\n color = 'surface.text.gray.normal',\n children,\n testID,\n textAlign,\n textDecorationLine,\n wordBreak,\n ...styledProps\n }: HeadingProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n useValidateAsProp({ componentName: 'Heading', as, validAsValues });\n\n const props = getHeadingProps({ as, size, weight, color, testID });\n\n return (\n <BaseText\n {...props}\n ref={ref}\n textAlign={textAlign}\n textDecorationLine={textDecorationLine}\n wordBreak={wordBreak}\n {...getStyledProps(styledProps)}\n >\n {children}\n </BaseText>\n );\n};\n\nconst Heading = React.forwardRef(_Heading);\n\nexport { Heading };\n"],"names":["validAsValues","getHeadingProps","_ref","as","size","weight","color","testID","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","isReactNative","role","componentName","_Heading","_ref2","ref","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","wordBreak","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","Object","assign","getStyledProps","Heading","React","forwardRef"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ import '../global/typography.js';
|
|
|
7
7
|
import '../global/motion.js';
|
|
8
8
|
import { throwBladeError } from '../../utils/logger/logger.js';
|
|
9
9
|
|
|
10
|
-
var WCAG2ContrastOptions={level:'AAA',size:'large'};var getColorWithOpacity=function getColorWithOpacity(color,opacity){return tinycolor(color).setAlpha(opacity).toHslString();};var generateChromaticBrandColors=function generateChromaticBrandColors(baseColorInput){var baseColor=tinycolor(baseColorInput);var baseColorHslString=baseColor.toHslString();if(__DEV__){if(!baseColor.isValid()){throwBladeError({message:'Invalid brandColor passed',moduleName:'createTheme'});}}var palette=[baseColorHslString];var brightness=tinycolor(baseColor).getBrightness();var lightnessFactor=brightness>150?3:6;var darknessFactor=brightness<50?3:5;var currentColor=baseColor;for(var lightShadeIndex=0;lightShadeIndex<6;lightShadeIndex++){currentColor=currentColor.brighten(lightnessFactor);palette.push(currentColor.toHslString());}currentColor=tinycolor(baseColorHslString);for(var darkShadeIndex=0;darkShadeIndex<4;darkShadeIndex++){currentColor=currentColor.darken(darknessFactor);palette.unshift(currentColor.toHslString());}var colorPalette=palette.reverse();var brandPrimaryColor=colorPalette[6];var brandColors={'50':colorPalette[0],'100':colorPalette[1],'200':colorPalette[2],'300':colorPalette[3],'400':colorPalette[4],'500':colorPalette[5],'600':brandPrimaryColor,'700':colorPalette[7],'800':colorPalette[8],'900':colorPalette[9],'1000':colorPalette[10],a50:getColorWithOpacity(brandPrimaryColor,opacity[100]),a150:getColorWithOpacity(brandPrimaryColor,opacity[100]),a100:getColorWithOpacity(brandPrimaryColor,opacity[200]),a200:getColorWithOpacity(brandPrimaryColor,opacity[300]),a400:getColorWithOpacity(brandPrimaryColor,opacity[400])};return brandColors;};var getOnLightOverrides=function getOnLightOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayLight[50],brandColors[600],WCAG2ContrastOptions)?brandColors[600]:colors.neutral.blueGrayLight[1100];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var lightThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:brandColors.a200,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:brandColors.a200,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},icon:{primary:{normal:brandColors[600]}},text:{primary:{normal:brandColors[600]}}}};return lightThemeOverrides;};var getOnDarkOverrides=function getOnDarkOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayDark[1100],brandColors[400],WCAG2ContrastOptions)?brandColors[400]:colors.neutral.blueGrayDark[0];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var darkThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:brandColors.a400,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:brandColors.a400,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},icon:{primary:{normal:brandColors[600]}}}};return darkThemeOverrides;};var createTheme=function createTheme(_ref){var brandColor=_ref.brandColor;var chromaticBrandColors=generateChromaticBrandColors(brandColor);var brandedLightTheme=getOnLightOverrides(chromaticBrandColors);var brandedDarkTheme=getOnDarkOverrides(chromaticBrandColors);var brandedThemeTokens=overrideTheme({baseThemeTokens:bladeTheme,overrides:{name:`custom-${tinycolor(brandColor).toHex()}`,colors:{onLight:Object.assign({},brandedLightTheme),onDark:Object.assign({},brandedDarkTheme)}}});return {theme:brandedThemeTokens,brandColors:chromaticBrandColors};};
|
|
10
|
+
var WCAG2ContrastOptions={level:'AAA',size:'large'};var getColorWithOpacity=function getColorWithOpacity(color,opacity){return tinycolor(color).setAlpha(opacity).toHslString();};var generateChromaticBrandColors=function generateChromaticBrandColors(baseColorInput){var baseColor=tinycolor(baseColorInput);var baseColorHslString=baseColor.toHslString();if(__DEV__){if(!baseColor.isValid()){throwBladeError({message:'Invalid brandColor passed',moduleName:'createTheme'});}}var palette=[baseColorHslString];var brightness=tinycolor(baseColor).getBrightness();var lightnessFactor=brightness>150?3:6;var darknessFactor=brightness<50?3:5;var currentColor=baseColor;for(var lightShadeIndex=0;lightShadeIndex<6;lightShadeIndex++){currentColor=currentColor.brighten(lightnessFactor);palette.push(currentColor.toHslString());}currentColor=tinycolor(baseColorHslString);for(var darkShadeIndex=0;darkShadeIndex<4;darkShadeIndex++){currentColor=currentColor.darken(darknessFactor);palette.unshift(currentColor.toHslString());}var colorPalette=palette.reverse();var brandPrimaryColor=colorPalette[6];var brandColors={'50':colorPalette[0],'100':colorPalette[1],'200':colorPalette[2],'300':colorPalette[3],'400':colorPalette[4],'500':colorPalette[5],'600':brandPrimaryColor,'700':colorPalette[7],'800':colorPalette[8],'900':colorPalette[9],'1000':colorPalette[10],a50:getColorWithOpacity(brandPrimaryColor,opacity[100]),a150:getColorWithOpacity(brandPrimaryColor,opacity[100]),a100:getColorWithOpacity(brandPrimaryColor,opacity[200]),a200:getColorWithOpacity(brandPrimaryColor,opacity[300]),a400:getColorWithOpacity(brandPrimaryColor,opacity[400])};return brandColors;};var getOnLightOverrides=function getOnLightOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayLight[50],brandColors[600],WCAG2ContrastOptions)?brandColors[600]:colors.neutral.blueGrayLight[1100];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var lightThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:brandColors.a200,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:brandColors.a200,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},border:{primary:{normal:brandColors[600],muted:brandColors.a200}},icon:{primary:{normal:brandColors[600]}},text:{primary:{normal:brandColors[600]}}}};return lightThemeOverrides;};var getOnDarkOverrides=function getOnDarkOverrides(brandColors){var foregroundOnSurface=tinycolor.isReadable(colors.neutral.blueGrayDark[1100],brandColors[400],WCAG2ContrastOptions)?brandColors[400]:colors.neutral.blueGrayDark[0];var foregroundOnBrand=tinycolor.mostReadable(brandColors[900],[colors.neutral.white[500],colors.neutral.black[500]],WCAG2ContrastOptions).toHslString();var darkThemeOverrides={interactive:{background:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100,fadedHighlighted:brandColors.a150}},border:{primary:{default:brandColors[600],highlighted:brandColors[700],disabled:brandColors.a100,faded:brandColors.a100}},text:{primary:{normal:foregroundOnSurface,disabled:brandColors.a400,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}},icon:{primary:{normal:foregroundOnSurface,disabled:brandColors.a400,muted:foregroundOnSurface,subtle:foregroundOnSurface},onPrimary:{normal:foregroundOnBrand,disabled:foregroundOnBrand,muted:foregroundOnBrand,subtle:foregroundOnBrand}}},surface:{background:{primary:{intense:brandColors[600],subtle:brandColors[200]}},border:{primary:{normal:brandColors[600],muted:brandColors.a200}},icon:{primary:{normal:brandColors[600]}}}};return darkThemeOverrides;};var createTheme=function createTheme(_ref){var brandColor=_ref.brandColor;var chromaticBrandColors=generateChromaticBrandColors(brandColor);var brandedLightTheme=getOnLightOverrides(chromaticBrandColors);var brandedDarkTheme=getOnDarkOverrides(chromaticBrandColors);var brandedThemeTokens=overrideTheme({baseThemeTokens:bladeTheme,overrides:{name:`custom-${tinycolor(brandColor).toHex()}`,colors:{onLight:Object.assign({},brandedLightTheme),onDark:Object.assign({},brandedDarkTheme)}}});return {theme:brandedThemeTokens,brandColors:chromaticBrandColors};};
|
|
11
11
|
|
|
12
12
|
export { createTheme };
|
|
13
13
|
//# sourceMappingURL=createTheme.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sources":["../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","__DEV__","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","default","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","toHex","colors","onLight","Object","assign","onDark","theme"],"mappings":";;;;;;;;;AAWA,IAAMA,oBAAkC,CAAG,CACzCC,KAAK,CAAE,KAAK,CACZC,IAAI,CAAE,OACR,CAAC,CAWD,IAAMC,mBAAmB,CAAG,SAAtBA,mBAAmBA,CAAIC,KAAiB,CAAEC,OAAe,CAAa,CAC1E,OAAOC,SAAS,CAACF,KAAK,CAAC,CAACG,QAAQ,CAACF,OAAO,CAAC,CAACG,WAAW,EAAE,CACzD,CAAC,CAUD,IAAMC,4BAA4B,CAAG,SAA/BA,4BAA4BA,CAAIC,cAA0B,CAA0B,CACxF,IAAMC,SAAS,CAAGL,SAAS,CAACI,cAAc,CAAC,CAC3C,IAAME,kBAAkB,CAAGD,SAAS,CAACH,WAAW,EAAE,CAClD,GAAIK,OAAO,CAAE,CACX,GAAI,CAACF,SAAS,CAACG,OAAO,EAAE,CAAE,CACxBC,eAAe,CAAC,CACdC,OAAO,CAAE,2BAA2B,CACpCC,UAAU,CAAE,aACd,CAAC,CAAC,CACJ,CACF,CAEA,IAAMC,OAAO,CAAG,CAACN,kBAAkB,CAAC,CACpC,IAAMO,UAAU,CAAGb,SAAS,CAACK,SAAS,CAAC,CAACS,aAAa,EAAE,CAEvD,IAAMC,eAAe,CAAGF,UAAU,CAAG,GAAG,CAAG,CAAC,CAAG,CAAC,CAChD,IAAMG,cAAc,CAAGH,UAAU,CAAG,EAAE,CAAG,CAAC,CAAG,CAAC,CAE9C,IAAII,YAAY,CAAGZ,SAAS,CAG5B,IAAK,IAAIa,eAAe,CAAG,CAAC,CAAEA,eAAe,CAAG,CAAC,CAAEA,eAAe,EAAE,CAAE,CACpED,YAAY,CAAGA,YAAY,CAACE,QAAQ,CAACJ,eAAe,CAAC,CACrDH,OAAO,CAACQ,IAAI,CAACH,YAAY,CAACf,WAAW,EAAE,CAAC,CAC1C,CAEAe,YAAY,CAAGjB,SAAS,CAACM,kBAAkB,CAAC,CAG5C,IAAK,IAAIe,cAAc,CAAG,CAAC,CAAEA,cAAc,CAAG,CAAC,CAAEA,cAAc,EAAE,CAAE,CACjEJ,YAAY,CAAGA,YAAY,CAACK,MAAM,CAACN,cAAc,CAAC,CAClDJ,OAAO,CAACW,OAAO,CAACN,YAAY,CAACf,WAAW,EAAE,CAAC,CAC7C,CAEA,IAAMsB,YAAY,CAAGZ,OAAO,CAACa,OAAO,EAAE,CACtC,IAAMC,iBAAiB,CAAGF,YAAY,CAAC,CAAC,CAAC,CAEzC,IAAMG,WAAgC,CAAG,CACvC,IAAI,CAAEH,YAAY,CAAC,CAAC,CAAC,CACrB,KAAK,CAAEA,YAAY,CAAC,CAAC,CAAC,CACtB,KAAK,CAAEA,YAAY,CAAC,CAAC,CAAC,CACtB,KAAK,CAAEA,YAAY,CAAC,CAAC,CAAC,CACtB,KAAK,CAAEA,YAAY,CAAC,CAAC,CAAC,CACtB,KAAK,CAAEA,YAAY,CAAC,CAAC,CAAC,CACtB,KAAK,CAAEE,iBAAiB,CACxB,KAAK,CAAEF,YAAY,CAAC,CAAC,CAAC,CACtB,KAAK,CAAEA,YAAY,CAAC,CAAC,CAAC,CACtB,KAAK,CAAEA,YAAY,CAAC,CAAC,CAAC,CACtB,MAAM,CAAEA,YAAY,CAAC,EAAE,CAAC,CACxBI,GAAG,CAAE/B,mBAAmB,CAAC6B,iBAAiB,CAAE3B,OAAO,CAAC,GAAG,CAAC,CAAC,CACzD8B,IAAI,CAAEhC,mBAAmB,CAAC6B,iBAAiB,CAAE3B,OAAO,CAAC,GAAG,CAAC,CAAC,CAC1D+B,IAAI,CAAEjC,mBAAmB,CAAC6B,iBAAiB,CAAE3B,OAAO,CAAC,GAAG,CAAC,CAAC,CAC1DgC,IAAI,CAAElC,mBAAmB,CAAC6B,iBAAiB,CAAE3B,OAAO,CAAC,GAAG,CAAC,CAAC,CAC1DiC,IAAI,CAAEnC,mBAAmB,CAAC6B,iBAAiB,CAAE3B,OAAO,CAAC,GAAG,CAAC,CAC3D,CAAC,CAED,OAAO4B,WAAW,CACpB,CAAC,CAQD,IAAMM,mBAAmB,CAAG,SAAtBA,mBAAmBA,CACvBN,WAAgC,CACkB,CAGlD,IAAMO,mBAAmB,CAAGlC,SAAS,CAACmC,UAAU,CAC9CC,MAAY,CAACC,OAAO,CAACC,aAAa,CAAC,EAAE,CAAC,CACtCX,WAAW,CAAC,GAAG,CAAC,CAChBjC,oBACF,CAAC,CACGiC,WAAW,CAAC,GAAG,CAAC,CAChBS,MAAY,CAACC,OAAO,CAACC,aAAa,CAAC,IAAI,CAAC,CAE5C,IAAMC,iBAAiB,CAAGvC,SAAS,CAChCwC,YAAY,CACXb,WAAW,CAAC,GAAG,CAAC,CAChB,CAACS,MAAY,CAACC,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC,CAAEL,MAAY,CAACC,OAAO,CAACK,KAAK,CAAC,GAAG,CAAC,CAAC,CAClEhD,oBACF,CAAC,CACAQ,WAAW,EAAE,CAGhB,IAAMyC,mBAAkE,CAAG,CACzEC,WAAW,CAAE,CACXC,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,OAAO,CAAEpB,WAAW,CAAC,GAAG,CAAC,CACzBqB,WAAW,CAAErB,WAAW,CAAC,GAAG,CAAC,CAC7BsB,QAAQ,CAAEtB,WAAW,CAACG,IAAI,CAC1BoB,KAAK,CAAEvB,WAAW,CAACG,IAAI,CACvBqB,gBAAgB,CAAExB,WAAW,CAACE,IAChC,CACF,CAAC,CACDuB,MAAM,CAAE,CACNN,OAAO,CAAE,CACPC,OAAO,CAAEpB,WAAW,CAAC,GAAG,CAAC,CACzBqB,WAAW,CAAErB,WAAW,CAAC,GAAG,CAAC,CAC7BsB,QAAQ,CAAEtB,WAAW,CAACG,IAAI,CAC1BoB,KAAK,CAAEvB,WAAW,CAACG,IACrB,CACF,CAAC,CACDuB,IAAI,CAAE,CACJP,OAAO,CAAE,CACPQ,MAAM,CAAEpB,mBAAmB,CAC3Be,QAAQ,CAAEtB,WAAW,CAACI,IAAI,CAC1BwB,KAAK,CAAErB,mBAAmB,CAC1BsB,MAAM,CAAEtB,mBACV,CAAC,CACDuB,SAAS,CAAE,CACTH,MAAM,CAAEf,iBAAiB,CACzBU,QAAQ,CAAEV,iBAAiB,CAC3BgB,KAAK,CAAEhB,iBAAiB,CACxBiB,MAAM,CAAEjB,iBACV,CACF,CAAC,CACDmB,IAAI,CAAE,CACJZ,OAAO,CAAE,CACPQ,MAAM,CAAEpB,mBAAmB,CAC3Be,QAAQ,CAAEtB,WAAW,CAACI,IAAI,CAC1BwB,KAAK,CAAErB,mBAAmB,CAC1BsB,MAAM,CAAEtB,mBACV,CAAC,CACDuB,SAAS,CAAE,CACTH,MAAM,CAAEf,iBAAiB,CACzBU,QAAQ,CAAEV,iBAAiB,CAC3BgB,KAAK,CAAEhB,iBAAiB,CACxBiB,MAAM,CAAEjB,iBACV,CACF,CACF,CAAC,CACDoB,OAAO,CAAE,CACPd,UAAU,CAAE,CACVC,OAAO,CAAE,CACPc,OAAO,CAAEjC,WAAW,CAAC,GAAG,CAAC,CACzB6B,MAAM,CAAE7B,WAAW,CAAC,GAAG,CACzB,CACF,CAAC,CACD+B,IAAI,CAAE,CACJZ,OAAO,CAAE,CACPQ,MAAM,CAAE3B,WAAW,CAAC,GAAG,CACzB,CACF,CAAC,CACD0B,IAAI,CAAE,CACJP,OAAO,CAAE,CACPQ,MAAM,CAAE3B,WAAW,CAAC,GAAG,CACzB,CACF,CACF,CACF,CAAC,CAED,OAAOgB,mBAAmB,CAC5B,CAAC,CAQD,IAAMkB,kBAAkB,CAAG,SAArBA,kBAAkBA,CACtBlC,WAAgC,CACiB,CAGjD,IAAMO,mBAAmB,CAAGlC,SAAS,CAACmC,UAAU,CAC9CC,MAAY,CAACC,OAAO,CAACyB,YAAY,CAAC,IAAI,CAAC,CACvCnC,WAAW,CAAC,GAAG,CAAC,CAChBjC,oBACF,CAAC,CACGiC,WAAW,CAAC,GAAG,CAAC,CAChBS,MAAY,CAACC,OAAO,CAACyB,YAAY,CAAC,CAAC,CAAC,CAExC,IAAMvB,iBAAiB,CAAGvC,SAAS,CAChCwC,YAAY,CACXb,WAAW,CAAC,GAAG,CAAC,CAChB,CAACS,MAAY,CAACC,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC,CAAEL,MAAY,CAACC,OAAO,CAACK,KAAK,CAAC,GAAG,CAAC,CAAC,CAClEhD,oBACF,CAAC,CACAQ,WAAW,EAAE,CAGhB,IAAM6D,kBAAgE,CAAG,CACvEnB,WAAW,CAAE,CACXC,UAAU,CAAE,CACVC,OAAO,CAAE,CACPC,OAAO,CAAEpB,WAAW,CAAC,GAAG,CAAC,CACzBqB,WAAW,CAAErB,WAAW,CAAC,GAAG,CAAC,CAC7BsB,QAAQ,CAAEtB,WAAW,CAACG,IAAI,CAC1BoB,KAAK,CAAEvB,WAAW,CAACG,IAAI,CACvBqB,gBAAgB,CAAExB,WAAW,CAACE,IAChC,CACF,CAAC,CACDuB,MAAM,CAAE,CACNN,OAAO,CAAE,CACPC,OAAO,CAAEpB,WAAW,CAAC,GAAG,CAAC,CACzBqB,WAAW,CAAErB,WAAW,CAAC,GAAG,CAAC,CAC7BsB,QAAQ,CAAEtB,WAAW,CAACG,IAAI,CAC1BoB,KAAK,CAAEvB,WAAW,CAACG,IACrB,CACF,CAAC,CACDuB,IAAI,CAAE,CACJP,OAAO,CAAE,CACPQ,MAAM,CAAEpB,mBAAmB,CAC3Be,QAAQ,CAAEtB,WAAW,CAACK,IAAI,CAC1BuB,KAAK,CAAErB,mBAAmB,CAC1BsB,MAAM,CAAEtB,mBACV,CAAC,CACDuB,SAAS,CAAE,CACTH,MAAM,CAAEf,iBAAiB,CACzBU,QAAQ,CAAEV,iBAAiB,CAC3BgB,KAAK,CAAEhB,iBAAiB,CACxBiB,MAAM,CAAEjB,iBACV,CACF,CAAC,CACDmB,IAAI,CAAE,CACJZ,OAAO,CAAE,CACPQ,MAAM,CAAEpB,mBAAmB,CAC3Be,QAAQ,CAAEtB,WAAW,CAACK,IAAI,CAC1BuB,KAAK,CAAErB,mBAAmB,CAC1BsB,MAAM,CAAEtB,mBACV,CAAC,CACDuB,SAAS,CAAE,CACTH,MAAM,CAAEf,iBAAiB,CACzBU,QAAQ,CAAEV,iBAAiB,CAC3BgB,KAAK,CAAEhB,iBAAiB,CACxBiB,MAAM,CAAEjB,iBACV,CACF,CACF,CAAC,CACDoB,OAAO,CAAE,CACPd,UAAU,CAAE,CACVC,OAAO,CAAE,CACPc,OAAO,CAAEjC,WAAW,CAAC,GAAG,CAAC,CACzB6B,MAAM,CAAE7B,WAAW,CAAC,GAAG,CACzB,CACF,CAAC,CACD+B,IAAI,CAAE,CACJZ,OAAO,CAAE,CACPQ,MAAM,CAAE3B,WAAW,CAAC,GAAG,CACzB,CACF,CACF,CACF,CAAC,CAED,OAAOoC,kBAAkB,CAC3B,CAAC,CAWY,IAAAC,WAAW,CAAG,SAAdA,WAAWA,CAAAC,IAAA,CAIwC,CAH9D,IAAAC,UAAU,CAAAD,IAAA,CAAVC,UAAU,CAIV,IAAMC,oBAAoB,CAAGhE,4BAA4B,CAAC+D,UAAU,CAAC,CAErE,IAAME,iBAAiB,CAAGnC,mBAAmB,CAACkC,oBAAoB,CAAC,CAEnE,IAAME,gBAAgB,CAAGR,kBAAkB,CAACM,oBAAoB,CAAC,CAEjE,IAAMG,kBAAkB,CAAGC,aAAa,CAAC,CACvCC,eAAe,CAAEC,UAAU,CAC3BC,SAAS,CAAE,CACTC,IAAI,CAAG,CAAS3E,OAAAA,EAAAA,SAAS,CAACkE,UAAU,CAAC,CAACU,KAAK,EAAG,EAAC,CAC/CC,MAAM,CAAE,CACNC,OAAO,CAAAC,MAAA,CAAAC,MAAA,CACFZ,EAAAA,CAAAA,iBAAiB,CACrB,CACDa,MAAM,CAAAF,MAAA,CAAAC,MAAA,CACDX,EAAAA,CAAAA,gBAAgB,CAEvB,CACF,CACF,CAAC,CAAC,CAEF,OAAO,CAAEa,KAAK,CAAEZ,kBAAkB,CAAE3C,WAAW,CAAEwC,oBAAqB,CAAC,CACzE;;;;"}
|
|
1
|
+
{"version":3,"file":"createTheme.js","sources":["../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n border: {\n primary: {\n normal: brandColors[600],\n muted: brandColors.a200,\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n border: {\n primary: {\n normal: brandColors[600],\n muted: brandColors.a200,\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","__DEV__","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","default","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","toHex","colors","onLight","Object","assign","onDark","theme"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","sources":["../../../../../../../src/components/Typography/Heading/Heading.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport React from 'react';\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef, TestID } from '~utils/types';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type HeadingProps = {\n as?: typeof validAsValues[number];\n /**\n * Overrides the color of the Heading component.\n *\n * **Note** This takes priority over `type` and `contrast` prop to decide color of heading\n */\n color?: BaseTextProps['color'];\n weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;\n children: React.ReactNode;\n textAlign?: BaseTextProps['textAlign'];\n textDecorationLine?: BaseTextProps['textDecorationLine'];\n size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;\n wordBreak?: BaseTextProps['wordBreak'];\n} & TestID &\n StyledPropsBlade;\n\nexport const getHeadingProps = ({\n as,\n size,\n weight,\n color,\n testID,\n}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<\n BaseTextProps,\n 'children'\n> => {\n const props: Omit<BaseTextProps, 'children'> = {\n color,\n fontSize: 300,\n fontWeight: weight ?? 'semibold',\n fontStyle: 'normal',\n lineHeight: 300,\n fontFamily: 'heading',\n accessibilityProps: isReactNative() ? { role: 'heading' } : {},\n componentName: 'heading',\n testID,\n };\n\n if (size === 'small') {\n props.fontSize = 300;\n props.lineHeight = 300;\n props.as = 'h6';\n } else if (size === 'medium') {\n props.fontSize = 400;\n props.lineHeight = 400;\n props.as = 'h5';\n } else if (size === 'large') {\n props.fontSize = 500;\n props.lineHeight = 500;\n props.as = 'h4';\n } else if (size === 'xlarge') {\n props.fontSize = 600;\n props.lineHeight = 600;\n props.as = 'h3';\n } else if (size === '2xlarge') {\n props.fontSize = 700;\n props.lineHeight = 700;\n props.as = 'h2';\n }\n\n // override the computed `as` prop if user passed an `as` prop\n props.as = as || props.as;\n return props;\n};\n\nconst _Heading = (\n {\n as,\n size = 'small',\n weight = 'semibold',\n color = 'surface.text.gray.normal',\n children,\n testID,\n textAlign,\n textDecorationLine,\n wordBreak,\n ...styledProps\n }: HeadingProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n useValidateAsProp({ componentName: 'Heading', as, validAsValues });\n\n const props = getHeadingProps({ as, size, weight, color, testID });\n\n return (\n <BaseText\n {...props}\n ref={ref}\n textAlign={textAlign}\n textDecorationLine={textDecorationLine}\n wordBreak={wordBreak}\n {...getStyledProps(styledProps)}\n >\n {children}\n </BaseText>\n );\n};\n\nconst Heading = React.forwardRef(_Heading);\n\nexport { Heading };\n"],"names":["validAsValues","getHeadingProps","_ref","as","size","weight","color","testID","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","isReactNative","role","componentName","_Heading","_ref2","ref","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","wordBreak","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","_objectSpread","getStyledProps","Heading","React","forwardRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Heading.js","sources":["../../../../../../../src/components/Typography/Heading/Heading.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport React from 'react';\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef, TestID } from '~utils/types';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type HeadingProps = {\n as?: typeof validAsValues[number];\n /**\n * Overrides the color of the Heading component.\n *\n * **Note** This takes priority over `type` and `contrast` prop to decide color of heading\n */\n color?: BaseTextProps['color'];\n weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;\n children: React.ReactNode;\n textAlign?: BaseTextProps['textAlign'];\n textDecorationLine?: BaseTextProps['textDecorationLine'];\n size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;\n wordBreak?: BaseTextProps['wordBreak'];\n} & TestID &\n StyledPropsBlade;\n\nexport const getHeadingProps = ({\n as,\n size,\n weight,\n color,\n testID,\n}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<\n BaseTextProps,\n 'children'\n> => {\n const props: Omit<BaseTextProps, 'children'> = {\n color,\n fontSize: 300,\n fontWeight: weight ?? 'semibold',\n fontStyle: 'normal',\n lineHeight: 300,\n fontFamily: 'heading',\n accessibilityProps: isReactNative() ? { role: 'heading' } : {},\n componentName: 'heading',\n testID,\n };\n\n if (size === 'small') {\n props.fontSize = 300;\n props.lineHeight = 300;\n props.as = 'h6';\n } else if (size === 'medium') {\n props.fontSize = 400;\n props.lineHeight = 400;\n props.as = 'h5';\n } else if (size === 'large') {\n props.fontSize = 500;\n props.lineHeight = 500;\n props.as = 'h4';\n } else if (size === 'xlarge') {\n props.fontSize = 600;\n props.lineHeight = 600;\n props.as = 'h3';\n } else if (size === '2xlarge') {\n props.fontSize = 700;\n props.lineHeight = 700;\n props.as = 'h2';\n }\n\n // override the computed `as` prop if user passed an `as` prop\n props.as = as || props.as;\n return props;\n};\n\nconst _Heading = (\n {\n as,\n size = 'small',\n weight = 'semibold',\n color = 'surface.text.gray.normal',\n children,\n testID,\n textAlign,\n textDecorationLine,\n wordBreak,\n ...styledProps\n }: HeadingProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n useValidateAsProp({ componentName: 'Heading', as, validAsValues });\n\n const props = getHeadingProps({ as, size, weight, color, testID });\n\n return (\n <BaseText\n {...props}\n ref={ref}\n textAlign={textAlign}\n textDecorationLine={textDecorationLine}\n wordBreak={wordBreak}\n {...getStyledProps(styledProps)}\n >\n {children}\n </BaseText>\n );\n};\n\nconst Heading = React.forwardRef(_Heading);\n\nexport { Heading };\n"],"names":["validAsValues","getHeadingProps","_ref","as","size","weight","color","testID","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","isReactNative","role","componentName","_Heading","_ref2","ref","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","wordBreak","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","_objectSpread","getStyledProps","Heading","React","forwardRef"],"mappings":"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"}
|
|
@@ -158,6 +158,12 @@ var getOnLightOverrides = function getOnLightOverrides(brandColors) {
|
|
|
158
158
|
subtle: brandColors[200]
|
|
159
159
|
}
|
|
160
160
|
},
|
|
161
|
+
border: {
|
|
162
|
+
primary: {
|
|
163
|
+
normal: brandColors[600],
|
|
164
|
+
muted: brandColors.a200
|
|
165
|
+
}
|
|
166
|
+
},
|
|
161
167
|
icon: {
|
|
162
168
|
primary: {
|
|
163
169
|
normal: brandColors[600]
|
|
@@ -241,6 +247,12 @@ var getOnDarkOverrides = function getOnDarkOverrides(brandColors) {
|
|
|
241
247
|
subtle: brandColors[200]
|
|
242
248
|
}
|
|
243
249
|
},
|
|
250
|
+
border: {
|
|
251
|
+
primary: {
|
|
252
|
+
normal: brandColors[600],
|
|
253
|
+
muted: brandColors.a200
|
|
254
|
+
}
|
|
255
|
+
},
|
|
244
256
|
icon: {
|
|
245
257
|
primary: {
|
|
246
258
|
normal: brandColors[600]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sources":["../../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","concat","toHex","colors","onLight","_objectSpread","onDark","theme"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"createTheme.js","sources":["../../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n border: {\n primary: {\n normal: brandColors[600],\n muted: brandColors.a200,\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n border: {\n primary: {\n normal: brandColors[600],\n muted: brandColors.a200,\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","concat","toHex","colors","onLight","_objectSpread","onDark","theme"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.js","sources":["../../../../../../../src/components/Typography/Heading/Heading.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport React from 'react';\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef, TestID } from '~utils/types';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type HeadingProps = {\n as?: typeof validAsValues[number];\n /**\n * Overrides the color of the Heading component.\n *\n * **Note** This takes priority over `type` and `contrast` prop to decide color of heading\n */\n color?: BaseTextProps['color'];\n weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;\n children: React.ReactNode;\n textAlign?: BaseTextProps['textAlign'];\n textDecorationLine?: BaseTextProps['textDecorationLine'];\n size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;\n wordBreak?: BaseTextProps['wordBreak'];\n} & TestID &\n StyledPropsBlade;\n\nexport const getHeadingProps = ({\n as,\n size,\n weight,\n color,\n testID,\n}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<\n BaseTextProps,\n 'children'\n> => {\n const props: Omit<BaseTextProps, 'children'> = {\n color,\n fontSize: 300,\n fontWeight: weight ?? 'semibold',\n fontStyle: 'normal',\n lineHeight: 300,\n fontFamily: 'heading',\n accessibilityProps: isReactNative() ? { role: 'heading' } : {},\n componentName: 'heading',\n testID,\n };\n\n if (size === 'small') {\n props.fontSize = 300;\n props.lineHeight = 300;\n props.as = 'h6';\n } else if (size === 'medium') {\n props.fontSize = 400;\n props.lineHeight = 400;\n props.as = 'h5';\n } else if (size === 'large') {\n props.fontSize = 500;\n props.lineHeight = 500;\n props.as = 'h4';\n } else if (size === 'xlarge') {\n props.fontSize = 600;\n props.lineHeight = 600;\n props.as = 'h3';\n } else if (size === '2xlarge') {\n props.fontSize = 700;\n props.lineHeight = 700;\n props.as = 'h2';\n }\n\n // override the computed `as` prop if user passed an `as` prop\n props.as = as || props.as;\n return props;\n};\n\nconst _Heading = (\n {\n as,\n size = 'small',\n weight = 'semibold',\n color = 'surface.text.gray.normal',\n children,\n testID,\n textAlign,\n textDecorationLine,\n wordBreak,\n ...styledProps\n }: HeadingProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n useValidateAsProp({ componentName: 'Heading', as, validAsValues });\n\n const props = getHeadingProps({ as, size, weight, color, testID });\n\n return (\n <BaseText\n {...props}\n ref={ref}\n textAlign={textAlign}\n textDecorationLine={textDecorationLine}\n wordBreak={wordBreak}\n {...getStyledProps(styledProps)}\n >\n {children}\n </BaseText>\n );\n};\n\nconst Heading = React.forwardRef(_Heading);\n\nexport { Heading };\n"],"names":["validAsValues","getHeadingProps","_ref","as","size","weight","color","testID","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","isReactNative","role","componentName","_Heading","_ref2","ref","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","wordBreak","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","_objectSpread","getStyledProps","Heading","React","forwardRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Heading.js","sources":["../../../../../../../src/components/Typography/Heading/Heading.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport React from 'react';\nimport type { ReactElement } from 'react';\nimport { BaseText } from '../BaseText';\nimport type { BaseTextProps, BaseTextSizes } from '../BaseText/types';\nimport { useValidateAsProp } from '../utils';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { isReactNative } from '~utils';\nimport type { BladeElementRef, TestID } from '~utils/types';\n\nconst validAsValues = ['span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;\nexport type HeadingProps = {\n as?: typeof validAsValues[number];\n /**\n * Overrides the color of the Heading component.\n *\n * **Note** This takes priority over `type` and `contrast` prop to decide color of heading\n */\n color?: BaseTextProps['color'];\n weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;\n children: React.ReactNode;\n textAlign?: BaseTextProps['textAlign'];\n textDecorationLine?: BaseTextProps['textDecorationLine'];\n size?: Extract<BaseTextSizes, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;\n wordBreak?: BaseTextProps['wordBreak'];\n} & TestID &\n StyledPropsBlade;\n\nexport const getHeadingProps = ({\n as,\n size,\n weight,\n color,\n testID,\n}: Pick<HeadingProps, 'as' | 'size' | 'weight' | 'color' | 'testID'>): Omit<\n BaseTextProps,\n 'children'\n> => {\n const props: Omit<BaseTextProps, 'children'> = {\n color,\n fontSize: 300,\n fontWeight: weight ?? 'semibold',\n fontStyle: 'normal',\n lineHeight: 300,\n fontFamily: 'heading',\n accessibilityProps: isReactNative() ? { role: 'heading' } : {},\n componentName: 'heading',\n testID,\n };\n\n if (size === 'small') {\n props.fontSize = 300;\n props.lineHeight = 300;\n props.as = 'h6';\n } else if (size === 'medium') {\n props.fontSize = 400;\n props.lineHeight = 400;\n props.as = 'h5';\n } else if (size === 'large') {\n props.fontSize = 500;\n props.lineHeight = 500;\n props.as = 'h4';\n } else if (size === 'xlarge') {\n props.fontSize = 600;\n props.lineHeight = 600;\n props.as = 'h3';\n } else if (size === '2xlarge') {\n props.fontSize = 700;\n props.lineHeight = 700;\n props.as = 'h2';\n }\n\n // override the computed `as` prop if user passed an `as` prop\n props.as = as || props.as;\n return props;\n};\n\nconst _Heading = (\n {\n as,\n size = 'small',\n weight = 'semibold',\n color = 'surface.text.gray.normal',\n children,\n testID,\n textAlign,\n textDecorationLine,\n wordBreak,\n ...styledProps\n }: HeadingProps,\n ref: React.Ref<BladeElementRef>,\n): ReactElement => {\n useValidateAsProp({ componentName: 'Heading', as, validAsValues });\n\n const props = getHeadingProps({ as, size, weight, color, testID });\n\n return (\n <BaseText\n {...props}\n ref={ref}\n textAlign={textAlign}\n textDecorationLine={textDecorationLine}\n wordBreak={wordBreak}\n {...getStyledProps(styledProps)}\n >\n {children}\n </BaseText>\n );\n};\n\nconst Heading = React.forwardRef(_Heading);\n\nexport { Heading };\n"],"names":["validAsValues","getHeadingProps","_ref","as","size","weight","color","testID","props","fontSize","fontWeight","fontStyle","lineHeight","fontFamily","accessibilityProps","isReactNative","role","componentName","_Heading","_ref2","ref","_ref2$size","_ref2$weight","_ref2$color","children","textAlign","textDecorationLine","wordBreak","styledProps","_objectWithoutProperties","_excluded","useValidateAsProp","_jsx","BaseText","_objectSpread","getStyledProps","Heading","React","forwardRef"],"mappings":"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"}
|
|
@@ -158,6 +158,12 @@ var getOnLightOverrides = function getOnLightOverrides(brandColors) {
|
|
|
158
158
|
subtle: brandColors[200]
|
|
159
159
|
}
|
|
160
160
|
},
|
|
161
|
+
border: {
|
|
162
|
+
primary: {
|
|
163
|
+
normal: brandColors[600],
|
|
164
|
+
muted: brandColors.a200
|
|
165
|
+
}
|
|
166
|
+
},
|
|
161
167
|
icon: {
|
|
162
168
|
primary: {
|
|
163
169
|
normal: brandColors[600]
|
|
@@ -241,6 +247,12 @@ var getOnDarkOverrides = function getOnDarkOverrides(brandColors) {
|
|
|
241
247
|
subtle: brandColors[200]
|
|
242
248
|
}
|
|
243
249
|
},
|
|
250
|
+
border: {
|
|
251
|
+
primary: {
|
|
252
|
+
normal: brandColors[600],
|
|
253
|
+
muted: brandColors.a200
|
|
254
|
+
}
|
|
255
|
+
},
|
|
244
256
|
icon: {
|
|
245
257
|
primary: {
|
|
246
258
|
normal: brandColors[600]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createTheme.js","sources":["../../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","concat","toHex","colors","onLight","_objectSpread","onDark","theme"],"mappings":";;;;;;;;;;;;AAUA;AACA,IAAMA,oBAAkC,GAAG;AACzCC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,IAAI,EAAE,OAAA;AACR,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,KAAiB,EAAEC,OAAe,EAAa;AAC1E,EAAA,OAAOC,SAAS,CAACF,KAAK,CAAC,CAACG,QAAQ,CAACF,OAAO,CAAC,CAACG,WAAW,EAAE,CAAA;AACzD,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAIC,cAA0B,EAA0B;AACxF,EAAA,IAAMC,SAAS,GAAGL,SAAS,CAACI,cAAc,CAAC,CAAA;AAC3C,EAAA,IAAME,kBAAkB,GAAGD,SAAS,CAACH,WAAW,EAAE,CAAA;AAClD,EAAA,IAAI,KAAO,EAAE;AACX,IAAA,IAAI,CAACG,SAAS,CAACE,OAAO,EAAE,EAAE;AACxBC,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,2BAA2B;AACpCC,QAAAA,UAAU,EAAE,aAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AAEA,EAAA,IAAMC,OAAO,GAAG,CAACL,kBAAkB,CAAC,CAAC;EACrC,IAAMM,UAAU,GAAGZ,SAAS,CAACK,SAAS,CAAC,CAACQ,aAAa,EAAE,CAAA;AACvD;EACA,IAAMC,eAAe,GAAGF,UAAU,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA;EAChD,IAAMG,cAAc,GAAGH,UAAU,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAA;EAE9C,IAAII,YAAY,GAAGX,SAAS,CAAA;;AAE5B;EACA,KAAK,IAAIY,eAAe,GAAG,CAAC,EAAEA,eAAe,GAAG,CAAC,EAAEA,eAAe,EAAE,EAAE;AACpED,IAAAA,YAAY,GAAGA,YAAY,CAACE,QAAQ,CAACJ,eAAe,CAAC,CAAA;IACrDH,OAAO,CAACQ,IAAI,CAACH,YAAY,CAACd,WAAW,EAAE,CAAC,CAAA;AAC1C,GAAA;AAEAc,EAAAA,YAAY,GAAGhB,SAAS,CAACM,kBAAkB,CAAC,CAAC;;AAE7C;EACA,KAAK,IAAIc,cAAc,GAAG,CAAC,EAAEA,cAAc,GAAG,CAAC,EAAEA,cAAc,EAAE,EAAE;AACjEJ,IAAAA,YAAY,GAAGA,YAAY,CAACK,MAAM,CAACN,cAAc,CAAC,CAAA;IAClDJ,OAAO,CAACW,OAAO,CAACN,YAAY,CAACd,WAAW,EAAE,CAAC,CAAC;AAC9C,GAAA;AAEA,EAAA,IAAMqB,YAAY,GAAGZ,OAAO,CAACa,OAAO,EAAE,CAAA;AACtC,EAAA,IAAMC,iBAAiB,GAAGF,YAAY,CAAC,CAAC,CAAC,CAAA;AAEzC,EAAA,IAAMG,WAAgC,GAAG;AACvC,IAAA,IAAI,EAAEH,YAAY,CAAC,CAAC,CAAC;AACrB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEE,iBAAiB;AACxB,IAAA,KAAK,EAAEF,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,MAAM,EAAEA,YAAY,CAAC,EAAE,CAAC;IACxBI,GAAG,EAAE9B,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAC;IACzD6B,IAAI,EAAE/B,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1D8B,IAAI,EAAEhC,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1D+B,IAAI,EAAEjC,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1DgC,IAAI,EAAElC,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAA;GAC1D,CAAA;AAED,EAAA,OAAO2B,WAAW,CAAA;AACpB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,IAAMM,mBAAmB,GAAG,SAAtBA,mBAAmBA,CACvBN,WAAgC,EACkB;AAClD;AACA;AACA,EAAA,IAAMO,mBAAmB,GAAGjC,SAAS,CAACkC,UAAU,CAC9CC,MAAY,CAACC,OAAO,CAACC,aAAa,CAAC,EAAE,CAAC,EACtCX,WAAW,CAAC,GAAG,CAAC,EAChBhC,oBACF,CAAC,GACGgC,WAAW,CAAC,GAAG,CAAC,GAChBS,MAAY,CAACC,OAAO,CAACC,aAAa,CAAC,IAAI,CAAC,CAAA;AAE5C,EAAA,IAAMC,iBAAiB,GAAGtC,SAAS,CAChCuC,YAAY,CACXb,WAAW,CAAC,GAAG,CAAC,EAChB,CAACS,MAAY,CAACC,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC,EAAEL,MAAY,CAACC,OAAO,CAACK,KAAK,CAAC,GAAG,CAAC,CAAC,EAClE/C,oBACF,CAAC,CACAQ,WAAW,EAAE,CAAA;;AAEhB;AACA,EAAA,IAAMwC,mBAAkE,GAAG;AACzEC,IAAAA,WAAW,EAAE;AACXC,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE;UACP,SAASnB,EAAAA,WAAW,CAAC,GAAG,CAAC;AACzBoB,UAAAA,WAAW,EAAEpB,WAAW,CAAC,GAAG,CAAC;UAC7BqB,QAAQ,EAAErB,WAAW,CAACG,IAAI;UAC1BmB,KAAK,EAAEtB,WAAW,CAACG,IAAI;UACvBoB,gBAAgB,EAAEvB,WAAW,CAACE,IAAAA;AAChC,SAAA;OACD;AACDsB,MAAAA,MAAM,EAAE;AACNL,QAAAA,OAAO,EAAE;UACP,SAASnB,EAAAA,WAAW,CAAC,GAAG,CAAC;AACzBoB,UAAAA,WAAW,EAAEpB,WAAW,CAAC,GAAG,CAAC;UAC7BqB,QAAQ,EAAErB,WAAW,CAACG,IAAI;UAC1BmB,KAAK,EAAEtB,WAAW,CAACG,IAAAA;AACrB,SAAA;OACD;AACDsB,MAAAA,IAAI,EAAE;AACJN,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAEnB,mBAAmB;UAC3Bc,QAAQ,EAAErB,WAAW,CAACI,IAAI;AAC1BuB,UAAAA,KAAK,EAAEpB,mBAAmB;AAC1BqB,UAAAA,MAAM,EAAErB,mBAAAA;SACT;AACDsB,QAAAA,SAAS,EAAE;AACTH,UAAAA,MAAM,EAAEd,iBAAiB;AACzBS,UAAAA,QAAQ,EAAET,iBAAiB;AAC3Be,UAAAA,KAAK,EAAEf,iBAAiB;AACxBgB,UAAAA,MAAM,EAAEhB,iBAAAA;AACV,SAAA;OACD;AACDkB,MAAAA,IAAI,EAAE;AACJX,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAEnB,mBAAmB;UAC3Bc,QAAQ,EAAErB,WAAW,CAACI,IAAI;AAC1BuB,UAAAA,KAAK,EAAEpB,mBAAmB;AAC1BqB,UAAAA,MAAM,EAAErB,mBAAAA;SACT;AACDsB,QAAAA,SAAS,EAAE;AACTH,UAAAA,MAAM,EAAEd,iBAAiB;AACzBS,UAAAA,QAAQ,EAAET,iBAAiB;AAC3Be,UAAAA,KAAK,EAAEf,iBAAiB;AACxBgB,UAAAA,MAAM,EAAEhB,iBAAAA;AACV,SAAA;AACF,OAAA;KACD;AACDmB,IAAAA,OAAO,EAAE;AACPb,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE;AACPa,UAAAA,OAAO,EAAEhC,WAAW,CAAC,GAAG,CAAC;UACzB4B,MAAM,EAAE5B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;OACD;AACD8B,MAAAA,IAAI,EAAE;AACJX,QAAAA,OAAO,EAAE;UACPO,MAAM,EAAE1B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;OACD;AACDyB,MAAAA,IAAI,EAAE;AACJN,QAAAA,OAAO,EAAE;UACPO,MAAM,EAAE1B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;AACF,OAAA;AACF,KAAA;GACD,CAAA;AAED,EAAA,OAAOgB,mBAAmB,CAAA;AAC5B,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,IAAMiB,kBAAkB,GAAG,SAArBA,kBAAkBA,CACtBjC,WAAgC,EACiB;AACjD;AACA;AACA,EAAA,IAAMO,mBAAmB,GAAGjC,SAAS,CAACkC,UAAU,CAC9CC,MAAY,CAACC,OAAO,CAACwB,YAAY,CAAC,IAAI,CAAC,EACvClC,WAAW,CAAC,GAAG,CAAC,EAChBhC,oBACF,CAAC,GACGgC,WAAW,CAAC,GAAG,CAAC,GAChBS,MAAY,CAACC,OAAO,CAACwB,YAAY,CAAC,CAAC,CAAC,CAAA;AAExC,EAAA,IAAMtB,iBAAiB,GAAGtC,SAAS,CAChCuC,YAAY,CACXb,WAAW,CAAC,GAAG,CAAC,EAChB,CAACS,MAAY,CAACC,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC,EAAEL,MAAY,CAACC,OAAO,CAACK,KAAK,CAAC,GAAG,CAAC,CAAC,EAClE/C,oBACF,CAAC,CACAQ,WAAW,EAAE,CAAA;;AAEhB;AACA,EAAA,IAAM2D,kBAAgE,GAAG;AACvElB,IAAAA,WAAW,EAAE;AACXC,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE;UACP,SAASnB,EAAAA,WAAW,CAAC,GAAG,CAAC;AACzBoB,UAAAA,WAAW,EAAEpB,WAAW,CAAC,GAAG,CAAC;UAC7BqB,QAAQ,EAAErB,WAAW,CAACG,IAAI;UAC1BmB,KAAK,EAAEtB,WAAW,CAACG,IAAI;UACvBoB,gBAAgB,EAAEvB,WAAW,CAACE,IAAAA;AAChC,SAAA;OACD;AACDsB,MAAAA,MAAM,EAAE;AACNL,QAAAA,OAAO,EAAE;UACP,SAASnB,EAAAA,WAAW,CAAC,GAAG,CAAC;AACzBoB,UAAAA,WAAW,EAAEpB,WAAW,CAAC,GAAG,CAAC;UAC7BqB,QAAQ,EAAErB,WAAW,CAACG,IAAI;UAC1BmB,KAAK,EAAEtB,WAAW,CAACG,IAAAA;AACrB,SAAA;OACD;AACDsB,MAAAA,IAAI,EAAE;AACJN,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAEnB,mBAAmB;UAC3Bc,QAAQ,EAAErB,WAAW,CAACK,IAAI;AAC1BsB,UAAAA,KAAK,EAAEpB,mBAAmB;AAC1BqB,UAAAA,MAAM,EAAErB,mBAAAA;SACT;AACDsB,QAAAA,SAAS,EAAE;AACTH,UAAAA,MAAM,EAAEd,iBAAiB;AACzBS,UAAAA,QAAQ,EAAET,iBAAiB;AAC3Be,UAAAA,KAAK,EAAEf,iBAAiB;AACxBgB,UAAAA,MAAM,EAAEhB,iBAAAA;AACV,SAAA;OACD;AACDkB,MAAAA,IAAI,EAAE;AACJX,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAEnB,mBAAmB;UAC3Bc,QAAQ,EAAErB,WAAW,CAACK,IAAI;AAC1BsB,UAAAA,KAAK,EAAEpB,mBAAmB;AAC1BqB,UAAAA,MAAM,EAAErB,mBAAAA;SACT;AACDsB,QAAAA,SAAS,EAAE;AACTH,UAAAA,MAAM,EAAEd,iBAAiB;AACzBS,UAAAA,QAAQ,EAAET,iBAAiB;AAC3Be,UAAAA,KAAK,EAAEf,iBAAiB;AACxBgB,UAAAA,MAAM,EAAEhB,iBAAAA;AACV,SAAA;AACF,OAAA;KACD;AACDmB,IAAAA,OAAO,EAAE;AACPb,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE;AACPa,UAAAA,OAAO,EAAEhC,WAAW,CAAC,GAAG,CAAC;UACzB4B,MAAM,EAAE5B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;OACD;AACD8B,MAAAA,IAAI,EAAE;AACJX,QAAAA,OAAO,EAAE;UACPO,MAAM,EAAE1B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;AACF,OAAA;AACF,KAAA;GACD,CAAA;AAED,EAAA,OAAOmC,kBAAkB,CAAA;AAC3B,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAIwC;AAAA,EAAA,IAH9DC,UAAU,GAAAD,IAAA,CAAVC,UAAU,CAAA;AAIV,EAAA,IAAMC,oBAAoB,GAAG9D,4BAA4B,CAAC6D,UAAU,CAAC,CAAA;AACrE;AACA,EAAA,IAAME,iBAAiB,GAAGlC,mBAAmB,CAACiC,oBAAoB,CAAC,CAAA;AACnE;AACA,EAAA,IAAME,gBAAgB,GAAGR,kBAAkB,CAACM,oBAAoB,CAAC,CAAA;AACjE;EACA,IAAMG,kBAAkB,GAAGC,aAAa,CAAC;AACvCC,IAAAA,eAAe,EAAEC,UAAU;AAC3BC,IAAAA,SAAS,EAAE;MACTC,IAAI,EAAA,SAAA,CAAAC,MAAA,CAAY1E,SAAS,CAACgE,UAAU,CAAC,CAACW,KAAK,EAAE,CAAE;AAC/CC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAAC,aAAA,CACFZ,EAAAA,EAAAA,iBAAiB,CACrB;QACDa,MAAM,EAAAD,aAAA,CAAA,EAAA,EACDX,gBAAgB,CAAA;AAEvB,OAAA;AACF,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;AAAEa,IAAAA,KAAK,EAAEZ,kBAAkB;AAAE1C,IAAAA,WAAW,EAAEuC,oBAAAA;GAAsB,CAAA;AACzE;;;;"}
|
|
1
|
+
{"version":3,"file":"createTheme.js","sources":["../../../../../../src/tokens/theme/createTheme.ts"],"sourcesContent":["import tinycolor from 'tinycolor2';\nimport type { WCAG2Options, ColorInput } from 'tinycolor2';\nimport type { ThemeTokens } from './theme';\nimport overrideTheme from './overrideTheme';\nimport bladeTheme from './bladeTheme';\nimport { colors as globalColors, opacity } from '~tokens/global';\nimport type { ColorChromaticScale } from '~tokens/global/colors';\nimport { throwBladeError } from '~utils/logger';\nimport type { DeepPartial } from '~utils/isPartialMatchObjectKeys';\n\n// WCAG2ContrastOptions are the options used to determine if a color is readable\nconst WCAG2ContrastOptions: WCAG2Options = {\n level: 'AAA',\n size: 'large',\n};\n\n/**\n * getColorWithOpacity\n * @param color - The color to add opacity to\n * @param opacity - The opacity to add to the color\n * @returns The color with the opacity added\n * @example\n * getColorWithOpacity('#fff', 0.5) // returns 'hsla(0, 0%, 100%, 0.5)'\n *\n **/\nconst getColorWithOpacity = (color: ColorInput, opacity: number): string => {\n return tinycolor(color).setAlpha(opacity).toHslString();\n};\n\n/**\n *\n * @description\n * Generates a chromatic color palette based on the base color passed in.\n * The base color is used to generate a palette of 11 colors, 5 shades lighter and 5 shades darker than the base color.\n * @param baseColorInput - The base color to generate the chromatic color palette from in hex, rgb, or hsl format\n * @returns Array of chromatic color palette\n */\nconst generateChromaticBrandColors = (baseColorInput: ColorInput): ColorChromaticScale => {\n const baseColor = tinycolor(baseColorInput);\n const baseColorHslString = baseColor.toHslString();\n if (__DEV__) {\n if (!baseColor.isValid()) {\n throwBladeError({\n message: 'Invalid brandColor passed',\n moduleName: 'createTheme',\n });\n }\n }\n\n const palette = [baseColorHslString]; // Include the original color\n const brightness = tinycolor(baseColor).getBrightness();\n // Determine how much to lighten or darken the colors depending on the brightness of the base color\n const lightnessFactor = brightness > 150 ? 3 : 6;\n const darknessFactor = brightness < 50 ? 3 : 5;\n\n let currentColor = baseColor;\n\n // Generate shades lighter\n for (let lightShadeIndex = 0; lightShadeIndex < 6; lightShadeIndex++) {\n currentColor = currentColor.brighten(lightnessFactor);\n palette.push(currentColor.toHslString());\n }\n\n currentColor = tinycolor(baseColorHslString); // Reset to the base color\n\n // Generate shades darker\n for (let darkShadeIndex = 0; darkShadeIndex < 4; darkShadeIndex++) {\n currentColor = currentColor.darken(darknessFactor);\n palette.unshift(currentColor.toHslString()); // Add shades at the beginning of the palette\n }\n\n const colorPalette = palette.reverse();\n const brandPrimaryColor = colorPalette[6];\n\n const brandColors: ColorChromaticScale = {\n '50': colorPalette[0],\n '100': colorPalette[1],\n '200': colorPalette[2],\n '300': colorPalette[3],\n '400': colorPalette[4],\n '500': colorPalette[5],\n '600': brandPrimaryColor,\n '700': colorPalette[7],\n '800': colorPalette[8],\n '900': colorPalette[9],\n '1000': colorPalette[10],\n a50: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a150: getColorWithOpacity(brandPrimaryColor, opacity[100]),\n a100: getColorWithOpacity(brandPrimaryColor, opacity[200]),\n a200: getColorWithOpacity(brandPrimaryColor, opacity[300]),\n a400: getColorWithOpacity(brandPrimaryColor, opacity[400]),\n };\n\n return brandColors;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the light theme\n * @description Returns overrides for the light theme with the brand colors passed in\n * @returns Overrides for the light theme with the custom brand colors\n */\nconst getOnLightOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onLight']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayLight[50],\n brandColors[600],\n WCAG2ContrastOptions,\n )\n ? brandColors[600]\n : globalColors.neutral.blueGrayLight[1100];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the light theme with the brand colors passed in\n const lightThemeOverrides: DeepPartial<ThemeTokens['colors']['onLight']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a200,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n border: {\n primary: {\n normal: brandColors[600],\n muted: brandColors.a200,\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n text: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return lightThemeOverrides;\n};\n\n/**\n *\n * @param brandColors - The brand colors to use to override the dark theme\n * @description Returns overrides for the dark theme with the brand colors passed in\n * @returns Overrides for the dark theme with the custom brand colors\n */\nconst getOnDarkOverrides = (\n brandColors: ColorChromaticScale,\n): DeepPartial<ThemeTokens['colors']['onDark']> => {\n // Select the most readable color to use as the foreground color on top of surface color\n // For example: On Secondary Button where the background color is surface color, the text color should be either the brand color or dark color depending on which is more readable on top of that surface color\n const foregroundOnSurface = tinycolor.isReadable(\n globalColors.neutral.blueGrayDark[1100],\n brandColors[400],\n WCAG2ContrastOptions,\n )\n ? brandColors[400]\n : globalColors.neutral.blueGrayDark[0];\n\n const foregroundOnBrand = tinycolor\n .mostReadable(\n brandColors[900],\n [globalColors.neutral.white[500], globalColors.neutral.black[500]],\n WCAG2ContrastOptions,\n )\n .toHslString();\n\n // Overrides for the dark theme with the brand colors passed in\n const darkThemeOverrides: DeepPartial<ThemeTokens['colors']['onDark']> = {\n interactive: {\n background: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n fadedHighlighted: brandColors.a150,\n },\n },\n border: {\n primary: {\n default: brandColors[600],\n highlighted: brandColors[700],\n disabled: brandColors.a100,\n faded: brandColors.a100,\n },\n },\n text: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n icon: {\n primary: {\n normal: foregroundOnSurface,\n disabled: brandColors.a400,\n muted: foregroundOnSurface,\n subtle: foregroundOnSurface,\n },\n onPrimary: {\n normal: foregroundOnBrand,\n disabled: foregroundOnBrand,\n muted: foregroundOnBrand,\n subtle: foregroundOnBrand,\n },\n },\n },\n surface: {\n background: {\n primary: {\n intense: brandColors[600],\n subtle: brandColors[200],\n },\n },\n border: {\n primary: {\n normal: brandColors[600],\n muted: brandColors.a200,\n },\n },\n icon: {\n primary: {\n normal: brandColors[600],\n },\n },\n },\n };\n\n return darkThemeOverrides;\n};\n\n/**\n * @param {Object} themeConfig - The brand color and overrides to apply to the theme\n * @param {string} themeConfig.brandColor - The brand color to use to generate the theme. Can be in hex, rgb, or hsl format.\n * @description\n * Creates a Blade Theme based on the custom brand color\n * @returns The Theme Tokens with the custom brand colors\n * @example\n * const { theme, brandColors } = createTheme({ brandColor: '#19BEA2'})\n **/\nexport const createTheme = ({\n brandColor,\n}: {\n brandColor: ColorInput;\n}): { theme: ThemeTokens; brandColors: ColorChromaticScale } => {\n const chromaticBrandColors = generateChromaticBrandColors(brandColor);\n // Get onLight overrides\n const brandedLightTheme = getOnLightOverrides(chromaticBrandColors);\n // Get onDark overrides\n const brandedDarkTheme = getOnDarkOverrides(chromaticBrandColors);\n // Override the payment theme with the brand colors\n const brandedThemeTokens = overrideTheme({\n baseThemeTokens: bladeTheme,\n overrides: {\n name: `custom-${tinycolor(brandColor).toHex()}`,\n colors: {\n onLight: {\n ...brandedLightTheme,\n },\n onDark: {\n ...brandedDarkTheme,\n },\n },\n },\n });\n\n return { theme: brandedThemeTokens, brandColors: chromaticBrandColors };\n};\n"],"names":["WCAG2ContrastOptions","level","size","getColorWithOpacity","color","opacity","tinycolor","setAlpha","toHslString","generateChromaticBrandColors","baseColorInput","baseColor","baseColorHslString","isValid","throwBladeError","message","moduleName","palette","brightness","getBrightness","lightnessFactor","darknessFactor","currentColor","lightShadeIndex","brighten","push","darkShadeIndex","darken","unshift","colorPalette","reverse","brandPrimaryColor","brandColors","a50","a150","a100","a200","a400","getOnLightOverrides","foregroundOnSurface","isReadable","globalColors","neutral","blueGrayLight","foregroundOnBrand","mostReadable","white","black","lightThemeOverrides","interactive","background","primary","highlighted","disabled","faded","fadedHighlighted","border","text","normal","muted","subtle","onPrimary","icon","surface","intense","getOnDarkOverrides","blueGrayDark","darkThemeOverrides","createTheme","_ref","brandColor","chromaticBrandColors","brandedLightTheme","brandedDarkTheme","brandedThemeTokens","overrideTheme","baseThemeTokens","bladeTheme","overrides","name","concat","toHex","colors","onLight","_objectSpread","onDark","theme"],"mappings":";;;;;;;;;;;;AAUA;AACA,IAAMA,oBAAkC,GAAG;AACzCC,EAAAA,KAAK,EAAE,KAAK;AACZC,EAAAA,IAAI,EAAE,OAAA;AACR,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,KAAiB,EAAEC,OAAe,EAAa;AAC1E,EAAA,OAAOC,SAAS,CAACF,KAAK,CAAC,CAACG,QAAQ,CAACF,OAAO,CAAC,CAACG,WAAW,EAAE,CAAA;AACzD,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,4BAA4B,GAAG,SAA/BA,4BAA4BA,CAAIC,cAA0B,EAA0B;AACxF,EAAA,IAAMC,SAAS,GAAGL,SAAS,CAACI,cAAc,CAAC,CAAA;AAC3C,EAAA,IAAME,kBAAkB,GAAGD,SAAS,CAACH,WAAW,EAAE,CAAA;AAClD,EAAA,IAAI,KAAO,EAAE;AACX,IAAA,IAAI,CAACG,SAAS,CAACE,OAAO,EAAE,EAAE;AACxBC,MAAAA,eAAe,CAAC;AACdC,QAAAA,OAAO,EAAE,2BAA2B;AACpCC,QAAAA,UAAU,EAAE,aAAA;AACd,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AAEA,EAAA,IAAMC,OAAO,GAAG,CAACL,kBAAkB,CAAC,CAAC;EACrC,IAAMM,UAAU,GAAGZ,SAAS,CAACK,SAAS,CAAC,CAACQ,aAAa,EAAE,CAAA;AACvD;EACA,IAAMC,eAAe,GAAGF,UAAU,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAA;EAChD,IAAMG,cAAc,GAAGH,UAAU,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,CAAA;EAE9C,IAAII,YAAY,GAAGX,SAAS,CAAA;;AAE5B;EACA,KAAK,IAAIY,eAAe,GAAG,CAAC,EAAEA,eAAe,GAAG,CAAC,EAAEA,eAAe,EAAE,EAAE;AACpED,IAAAA,YAAY,GAAGA,YAAY,CAACE,QAAQ,CAACJ,eAAe,CAAC,CAAA;IACrDH,OAAO,CAACQ,IAAI,CAACH,YAAY,CAACd,WAAW,EAAE,CAAC,CAAA;AAC1C,GAAA;AAEAc,EAAAA,YAAY,GAAGhB,SAAS,CAACM,kBAAkB,CAAC,CAAC;;AAE7C;EACA,KAAK,IAAIc,cAAc,GAAG,CAAC,EAAEA,cAAc,GAAG,CAAC,EAAEA,cAAc,EAAE,EAAE;AACjEJ,IAAAA,YAAY,GAAGA,YAAY,CAACK,MAAM,CAACN,cAAc,CAAC,CAAA;IAClDJ,OAAO,CAACW,OAAO,CAACN,YAAY,CAACd,WAAW,EAAE,CAAC,CAAC;AAC9C,GAAA;AAEA,EAAA,IAAMqB,YAAY,GAAGZ,OAAO,CAACa,OAAO,EAAE,CAAA;AACtC,EAAA,IAAMC,iBAAiB,GAAGF,YAAY,CAAC,CAAC,CAAC,CAAA;AAEzC,EAAA,IAAMG,WAAgC,GAAG;AACvC,IAAA,IAAI,EAAEH,YAAY,CAAC,CAAC,CAAC;AACrB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEE,iBAAiB;AACxB,IAAA,KAAK,EAAEF,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,KAAK,EAAEA,YAAY,CAAC,CAAC,CAAC;AACtB,IAAA,MAAM,EAAEA,YAAY,CAAC,EAAE,CAAC;IACxBI,GAAG,EAAE9B,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAC;IACzD6B,IAAI,EAAE/B,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1D8B,IAAI,EAAEhC,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1D+B,IAAI,EAAEjC,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAC;IAC1DgC,IAAI,EAAElC,mBAAmB,CAAC4B,iBAAiB,EAAE1B,OAAO,CAAC,GAAG,CAAC,CAAA;GAC1D,CAAA;AAED,EAAA,OAAO2B,WAAW,CAAA;AACpB,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,IAAMM,mBAAmB,GAAG,SAAtBA,mBAAmBA,CACvBN,WAAgC,EACkB;AAClD;AACA;AACA,EAAA,IAAMO,mBAAmB,GAAGjC,SAAS,CAACkC,UAAU,CAC9CC,MAAY,CAACC,OAAO,CAACC,aAAa,CAAC,EAAE,CAAC,EACtCX,WAAW,CAAC,GAAG,CAAC,EAChBhC,oBACF,CAAC,GACGgC,WAAW,CAAC,GAAG,CAAC,GAChBS,MAAY,CAACC,OAAO,CAACC,aAAa,CAAC,IAAI,CAAC,CAAA;AAE5C,EAAA,IAAMC,iBAAiB,GAAGtC,SAAS,CAChCuC,YAAY,CACXb,WAAW,CAAC,GAAG,CAAC,EAChB,CAACS,MAAY,CAACC,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC,EAAEL,MAAY,CAACC,OAAO,CAACK,KAAK,CAAC,GAAG,CAAC,CAAC,EAClE/C,oBACF,CAAC,CACAQ,WAAW,EAAE,CAAA;;AAEhB;AACA,EAAA,IAAMwC,mBAAkE,GAAG;AACzEC,IAAAA,WAAW,EAAE;AACXC,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE;UACP,SAASnB,EAAAA,WAAW,CAAC,GAAG,CAAC;AACzBoB,UAAAA,WAAW,EAAEpB,WAAW,CAAC,GAAG,CAAC;UAC7BqB,QAAQ,EAAErB,WAAW,CAACG,IAAI;UAC1BmB,KAAK,EAAEtB,WAAW,CAACG,IAAI;UACvBoB,gBAAgB,EAAEvB,WAAW,CAACE,IAAAA;AAChC,SAAA;OACD;AACDsB,MAAAA,MAAM,EAAE;AACNL,QAAAA,OAAO,EAAE;UACP,SAASnB,EAAAA,WAAW,CAAC,GAAG,CAAC;AACzBoB,UAAAA,WAAW,EAAEpB,WAAW,CAAC,GAAG,CAAC;UAC7BqB,QAAQ,EAAErB,WAAW,CAACG,IAAI;UAC1BmB,KAAK,EAAEtB,WAAW,CAACG,IAAAA;AACrB,SAAA;OACD;AACDsB,MAAAA,IAAI,EAAE;AACJN,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAEnB,mBAAmB;UAC3Bc,QAAQ,EAAErB,WAAW,CAACI,IAAI;AAC1BuB,UAAAA,KAAK,EAAEpB,mBAAmB;AAC1BqB,UAAAA,MAAM,EAAErB,mBAAAA;SACT;AACDsB,QAAAA,SAAS,EAAE;AACTH,UAAAA,MAAM,EAAEd,iBAAiB;AACzBS,UAAAA,QAAQ,EAAET,iBAAiB;AAC3Be,UAAAA,KAAK,EAAEf,iBAAiB;AACxBgB,UAAAA,MAAM,EAAEhB,iBAAAA;AACV,SAAA;OACD;AACDkB,MAAAA,IAAI,EAAE;AACJX,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAEnB,mBAAmB;UAC3Bc,QAAQ,EAAErB,WAAW,CAACI,IAAI;AAC1BuB,UAAAA,KAAK,EAAEpB,mBAAmB;AAC1BqB,UAAAA,MAAM,EAAErB,mBAAAA;SACT;AACDsB,QAAAA,SAAS,EAAE;AACTH,UAAAA,MAAM,EAAEd,iBAAiB;AACzBS,UAAAA,QAAQ,EAAET,iBAAiB;AAC3Be,UAAAA,KAAK,EAAEf,iBAAiB;AACxBgB,UAAAA,MAAM,EAAEhB,iBAAAA;AACV,SAAA;AACF,OAAA;KACD;AACDmB,IAAAA,OAAO,EAAE;AACPb,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE;AACPa,UAAAA,OAAO,EAAEhC,WAAW,CAAC,GAAG,CAAC;UACzB4B,MAAM,EAAE5B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;OACD;AACDwB,MAAAA,MAAM,EAAE;AACNL,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAE1B,WAAW,CAAC,GAAG,CAAC;UACxB2B,KAAK,EAAE3B,WAAW,CAACI,IAAAA;AACrB,SAAA;OACD;AACD0B,MAAAA,IAAI,EAAE;AACJX,QAAAA,OAAO,EAAE;UACPO,MAAM,EAAE1B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;OACD;AACDyB,MAAAA,IAAI,EAAE;AACJN,QAAAA,OAAO,EAAE;UACPO,MAAM,EAAE1B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;AACF,OAAA;AACF,KAAA;GACD,CAAA;AAED,EAAA,OAAOgB,mBAAmB,CAAA;AAC5B,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,IAAMiB,kBAAkB,GAAG,SAArBA,kBAAkBA,CACtBjC,WAAgC,EACiB;AACjD;AACA;AACA,EAAA,IAAMO,mBAAmB,GAAGjC,SAAS,CAACkC,UAAU,CAC9CC,MAAY,CAACC,OAAO,CAACwB,YAAY,CAAC,IAAI,CAAC,EACvClC,WAAW,CAAC,GAAG,CAAC,EAChBhC,oBACF,CAAC,GACGgC,WAAW,CAAC,GAAG,CAAC,GAChBS,MAAY,CAACC,OAAO,CAACwB,YAAY,CAAC,CAAC,CAAC,CAAA;AAExC,EAAA,IAAMtB,iBAAiB,GAAGtC,SAAS,CAChCuC,YAAY,CACXb,WAAW,CAAC,GAAG,CAAC,EAChB,CAACS,MAAY,CAACC,OAAO,CAACI,KAAK,CAAC,GAAG,CAAC,EAAEL,MAAY,CAACC,OAAO,CAACK,KAAK,CAAC,GAAG,CAAC,CAAC,EAClE/C,oBACF,CAAC,CACAQ,WAAW,EAAE,CAAA;;AAEhB;AACA,EAAA,IAAM2D,kBAAgE,GAAG;AACvElB,IAAAA,WAAW,EAAE;AACXC,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE;UACP,SAASnB,EAAAA,WAAW,CAAC,GAAG,CAAC;AACzBoB,UAAAA,WAAW,EAAEpB,WAAW,CAAC,GAAG,CAAC;UAC7BqB,QAAQ,EAAErB,WAAW,CAACG,IAAI;UAC1BmB,KAAK,EAAEtB,WAAW,CAACG,IAAI;UACvBoB,gBAAgB,EAAEvB,WAAW,CAACE,IAAAA;AAChC,SAAA;OACD;AACDsB,MAAAA,MAAM,EAAE;AACNL,QAAAA,OAAO,EAAE;UACP,SAASnB,EAAAA,WAAW,CAAC,GAAG,CAAC;AACzBoB,UAAAA,WAAW,EAAEpB,WAAW,CAAC,GAAG,CAAC;UAC7BqB,QAAQ,EAAErB,WAAW,CAACG,IAAI;UAC1BmB,KAAK,EAAEtB,WAAW,CAACG,IAAAA;AACrB,SAAA;OACD;AACDsB,MAAAA,IAAI,EAAE;AACJN,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAEnB,mBAAmB;UAC3Bc,QAAQ,EAAErB,WAAW,CAACK,IAAI;AAC1BsB,UAAAA,KAAK,EAAEpB,mBAAmB;AAC1BqB,UAAAA,MAAM,EAAErB,mBAAAA;SACT;AACDsB,QAAAA,SAAS,EAAE;AACTH,UAAAA,MAAM,EAAEd,iBAAiB;AACzBS,UAAAA,QAAQ,EAAET,iBAAiB;AAC3Be,UAAAA,KAAK,EAAEf,iBAAiB;AACxBgB,UAAAA,MAAM,EAAEhB,iBAAAA;AACV,SAAA;OACD;AACDkB,MAAAA,IAAI,EAAE;AACJX,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAEnB,mBAAmB;UAC3Bc,QAAQ,EAAErB,WAAW,CAACK,IAAI;AAC1BsB,UAAAA,KAAK,EAAEpB,mBAAmB;AAC1BqB,UAAAA,MAAM,EAAErB,mBAAAA;SACT;AACDsB,QAAAA,SAAS,EAAE;AACTH,UAAAA,MAAM,EAAEd,iBAAiB;AACzBS,UAAAA,QAAQ,EAAET,iBAAiB;AAC3Be,UAAAA,KAAK,EAAEf,iBAAiB;AACxBgB,UAAAA,MAAM,EAAEhB,iBAAAA;AACV,SAAA;AACF,OAAA;KACD;AACDmB,IAAAA,OAAO,EAAE;AACPb,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE;AACPa,UAAAA,OAAO,EAAEhC,WAAW,CAAC,GAAG,CAAC;UACzB4B,MAAM,EAAE5B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;OACD;AACDwB,MAAAA,MAAM,EAAE;AACNL,QAAAA,OAAO,EAAE;AACPO,UAAAA,MAAM,EAAE1B,WAAW,CAAC,GAAG,CAAC;UACxB2B,KAAK,EAAE3B,WAAW,CAACI,IAAAA;AACrB,SAAA;OACD;AACD0B,MAAAA,IAAI,EAAE;AACJX,QAAAA,OAAO,EAAE;UACPO,MAAM,EAAE1B,WAAW,CAAC,GAAG,CAAA;AACzB,SAAA;AACF,OAAA;AACF,KAAA;GACD,CAAA;AAED,EAAA,OAAOmC,kBAAkB,CAAA;AAC3B,CAAC,CAAA;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACaC,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAIwC;AAAA,EAAA,IAH9DC,UAAU,GAAAD,IAAA,CAAVC,UAAU,CAAA;AAIV,EAAA,IAAMC,oBAAoB,GAAG9D,4BAA4B,CAAC6D,UAAU,CAAC,CAAA;AACrE;AACA,EAAA,IAAME,iBAAiB,GAAGlC,mBAAmB,CAACiC,oBAAoB,CAAC,CAAA;AACnE;AACA,EAAA,IAAME,gBAAgB,GAAGR,kBAAkB,CAACM,oBAAoB,CAAC,CAAA;AACjE;EACA,IAAMG,kBAAkB,GAAGC,aAAa,CAAC;AACvCC,IAAAA,eAAe,EAAEC,UAAU;AAC3BC,IAAAA,SAAS,EAAE;MACTC,IAAI,EAAA,SAAA,CAAAC,MAAA,CAAY1E,SAAS,CAACgE,UAAU,CAAC,CAACW,KAAK,EAAE,CAAE;AAC/CC,MAAAA,MAAM,EAAE;AACNC,QAAAA,OAAO,EAAAC,aAAA,CACFZ,EAAAA,EAAAA,iBAAiB,CACrB;QACDa,MAAM,EAAAD,aAAA,CAAA,EAAA,EACDX,gBAAgB,CAAA;AAEvB,OAAA;AACF,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;AAAEa,IAAAA,KAAK,EAAEZ,kBAAkB;AAAE1C,IAAAA,WAAW,EAAEuC,oBAAAA;GAAsB,CAAA;AACzE;;;;"}
|
|
@@ -10512,7 +10512,7 @@ type HeadingProps = {
|
|
|
10512
10512
|
* **Note** This takes priority over `type` and `contrast` prop to decide color of heading
|
|
10513
10513
|
*/
|
|
10514
10514
|
color?: BaseTextProps['color'];
|
|
10515
|
-
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
|
|
10515
|
+
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
|
|
10516
10516
|
children: React__default.ReactNode;
|
|
10517
10517
|
textAlign?: BaseTextProps['textAlign'];
|
|
10518
10518
|
textDecorationLine?: BaseTextProps['textDecorationLine'];
|
|
@@ -10528,7 +10528,7 @@ declare const Heading: React__default.ForwardRefExoticComponent<{
|
|
|
10528
10528
|
* **Note** This takes priority over `type` and `contrast` prop to decide color of heading
|
|
10529
10529
|
*/
|
|
10530
10530
|
color?: BaseTextProps['color'];
|
|
10531
|
-
weight?: "regular" | "semibold" | undefined;
|
|
10531
|
+
weight?: "medium" | "regular" | "semibold" | undefined;
|
|
10532
10532
|
children: React__default.ReactNode;
|
|
10533
10533
|
textAlign?: BaseTextProps['textAlign'];
|
|
10534
10534
|
textDecorationLine?: BaseTextProps['textDecorationLine'];
|
|
@@ -6632,7 +6632,7 @@ type HeadingProps = {
|
|
|
6632
6632
|
* **Note** This takes priority over `type` and `contrast` prop to decide color of heading
|
|
6633
6633
|
*/
|
|
6634
6634
|
color?: BaseTextProps['color'];
|
|
6635
|
-
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'semibold'>;
|
|
6635
|
+
weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
|
|
6636
6636
|
children: React__default.ReactNode;
|
|
6637
6637
|
textAlign?: BaseTextProps['textAlign'];
|
|
6638
6638
|
textDecorationLine?: BaseTextProps['textDecorationLine'];
|
|
@@ -6648,7 +6648,7 @@ declare const Heading: React__default.ForwardRefExoticComponent<{
|
|
|
6648
6648
|
* **Note** This takes priority over `type` and `contrast` prop to decide color of heading
|
|
6649
6649
|
*/
|
|
6650
6650
|
color?: BaseTextProps['color'];
|
|
6651
|
-
weight?: "regular" | "semibold" | undefined;
|
|
6651
|
+
weight?: "medium" | "regular" | "semibold" | undefined;
|
|
6652
6652
|
children: React__default.ReactNode;
|
|
6653
6653
|
textAlign?: BaseTextProps['textAlign'];
|
|
6654
6654
|
textDecorationLine?: BaseTextProps['textDecorationLine'];
|