import { get , hasIn , isNil } from 'lodash-es' ; import { THEMES } from '../theme' ; import { StringOrNumber , SystemScaleType } from '../types' ; const hexRegex = /^#[a-fA-F0-9]{3,6}$/ ; const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/ ; const rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i ; function parseToRGB ( color ) { if ( color . match ( hexRegex ) ) { return { red : parseInt ( `${ color [ 1 ] }${ color [ 2 ] }` , 16 ) , green : parseInt ( `${ color [ 3 ] }${ color [ 4 ] }` , 16 ) , blue : parseInt ( `${ color [ 5 ] }${ color [ 6 ] }` , 16 ) , } ; } throw new Error ( 'color is not a valid hex value' ) ; } param hexColor param alpha export function rgba ( hexColor , alpha ) { if ( ! hexColor ) { return ; } const rgbValue = parseToRGB ( hexColor ) ; return `rgba(${ rgbValue . red },${ rgbValue . green },${ rgbValue . blue },${ alpha })` ; } const THEME_TOKEN_PATTERN = /^(colors|fontSizes|lineHeights|borders|radii|shadows|space|sizes|zIndices|components)./ ; const CSS_FUNCTION_PATTERN = /^[a-z]+(-[a-z]*)?\(.+\)$/ ; param token export function isValidTokenPath ( token ) { if ( token && THEME_TOKEN_PATTERN . test ( token ) ) { return true ; } return false ; } const tokenPathToVariable = ( token ) => { return `var(--rex-${ token . split ( '.' ) . join ( '-' ) })` ; } ; param token param scale export function tokenVar ( token , scale ? ) { if ( ! token ) { return ; } if ( isValidTokenPath ( token ) ) { return tokenPathToVariable ( token ) ; } if ( CSS_FUNCTION_PATTERN . test ( token ) ) { return token ; } if ( scale ) { const themedToken = [ scale , token ] . join ( '.' ) ; if ( hasIn ( THEMES . base , themedToken ) ) { return tokenPathToVariable ( themedToken ) ; } } return token ; } param token export function colors ( token ) { if ( hexRegex . test ( token ) || rgbRegex . test ( token ) || rgbaRegex . test ( token ) ) { return token ; } return tokenVar ( token , 'colors' ) ; } param token export function borders ( token ) { if ( isNil ( token ) ) { return ; } if ( Number ( token ) === 0 ) { return 0 ; } if ( token . split ( ' ' ) . length > 1 ) { return token ; } return tokenVar ( token , 'borders' ) ; } export function shadows ( token ) { if ( token && token . split ( ' ' ) . length > 4 ) { return token ; } return tokenVar ( token , 'shadows' ) ; } example const SIZE_UNIT_VALUE = /^\d+(\.\d+)?(px|vw|vh|%)$/ ; param token param scale export function sizes ( token , scale = 'sizes' ) { if ( typeof token === 'number' ) { return `${ token }px` ; } if ( typeof token === 'string' && SIZE_UNIT_VALUE . test ( token ) ) { return token ; } return tokenVar ( token , scale ) ; } param token returns export function lineHeights ( token ) { if ( typeof token === 'number' ) { return token ; } if ( typeof token === 'string' && SIZE_UNIT_VALUE . test ( token ) ) { return token ; } return tokenVar ( token , 'lineHeights' ) ; } param token export function space ( token ) { return sizes ( token , 'space' ) ; } param token export function radii ( token ) { return sizes ( token , 'radii' ) ; } param token export function fontSizes ( token ? ) { return sizes ( token , 'fontSizes' ) ; } param token example example export function getToken ( token ) { return tokenVar ( token , 'components' ) ; } param token param themeObject export function getTokenValue ( token , themeObject = { } ) { let val = token ; while ( isValidTokenPath ( val ) ) { val = get ( themeObject , val ) ; } return val ; }