Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 57x 35552x 35552x 763x 57x 763x 763x 763x 763x 763x 1x 762x 9x 753x 164x 589x 57x 21788x 21788x 21788x 21788x 57x 12743x 12743x 12743x 57x 23x 23x 2x 21x 21x 57x 227x 227x 8x 219x 219x 57x 2x 2x 2x | /** * Grape UI Core style helpers. */ import { getGlobalStyles, getGlobalOverrides } from 'src/global-styles'; import { isKeyNestedProp, resolveToProperty } from 'src/utils/objectHelpers'; import { defaultStylesBase } from '..'; import { CSS_INHERIT_VALUE } from '../cssDefaults'; /** * * @param {Object} globalOverrides Takes in global styles as an object. If the object has theme property, it will resolve to new global styled object with theme styles via getGlobalOverrides. * Othewise returns the global styles object as is. If undefined returns the default global style object via getGlobalStyles. */ export const resolveGlobal = (globalOverrides = getGlobalStyles()) => { const theme = resolveToProperty('theme', globalOverrides); return theme ? getGlobalOverrides(globalOverrides) : globalOverrides; }; export const getBorderRadiusForFormFieldType = (borderRadius, formStyle) => ((formStyle === 'filled') ? `${borderRadius} ${borderRadius} 0 0` : borderRadius); export const resolveBorderRadius = (props, globalOverrides, defaultBorderRadius = defaultStylesBase.borderRadius) => { Iif (!props) { return getBorderRadiusForFormFieldType(defaultBorderRadius); } // Grape UI lg or sm options const globalStyles = resolveGlobal(globalOverrides); const { border: borderSchema } = globalStyles; const { borderRadius, formStyle, lg, sm, } = props; if (borderRadius) { return getBorderRadiusForFormFieldType(borderRadius, formStyle); } if (lg) { return getBorderRadiusForFormFieldType(borderSchema.borderRadius.lg, formStyle); } if (sm) { return getBorderRadiusForFormFieldType(borderSchema.borderRadius.sm, formStyle); } return getBorderRadiusForFormFieldType(borderSchema.borderRadius.base, formStyle); }; export const resolveColor = (colorToResolve, globalOverrides, defaultColor = defaultStylesBase.color) => { const globalStyles = resolveGlobal(globalOverrides); const { colors: colorSchema } = globalStyles; const resolvedValue = isKeyNestedProp(colorToResolve) ? resolveToProperty(colorToResolve, colorSchema) : resolveToProperty(`${colorToResolve}.base`, colorSchema); return resolvedValue || colorToResolve || defaultColor; }; export const resolveFontFamily = (fontFamilyToResolve, globalOverrides, defaultValue) => { const globalStyles = resolveGlobal(globalOverrides); const { fontFamily: fontFamilySchema } = globalStyles; return resolveToProperty(fontFamilyToResolve, fontFamilySchema) || defaultValue; }; export const resolveBoxShadow = (depth, globalOverrides) => { const { shadow: shadowSchema } = resolveGlobal(globalOverrides); if (!depth || typeof depth !== 'string') { return CSS_INHERIT_VALUE; } const resolvedBoxShadow = resolveToProperty(depth, shadowSchema); return resolvedBoxShadow || CSS_INHERIT_VALUE; }; export const resolveZIndex = (depth, globalOverrides) => { const { zIndex: zIndexSchema } = resolveGlobal(globalOverrides); if (!depth || typeof depth !== 'string') { return CSS_INHERIT_VALUE; } const resolvedZIndex = resolveToProperty(depth, zIndexSchema); return resolvedZIndex || CSS_INHERIT_VALUE; }; export const resolveElevation = (depth, globalOverrides) => { const resolvedBoxShadow = resolveBoxShadow(depth, globalOverrides); const resolvedZIndex = resolveZIndex(depth, globalOverrides); return `z-index: ${resolvedZIndex}; box-shadow: ${resolvedBoxShadow}` || CSS_INHERIT_VALUE; }; |