@devseed-ui/theme-provider
Version:
devseed UI Kit Theme
277 lines (265 loc) • 7.41 kB
TypeScript
import './color-palette';
import './provider';
import './helpers';
import './math';
import { DefaultTheme, FlattenSimpleInterpolation } from 'styled-components';
declare module '@devseed-ui/theme-provider' {
type ThemeValPath =
| 'color.base'
| 'color.surface'
| 'color.primary'
| 'color.secondary'
| 'color.danger'
| 'color.warning'
| 'color.success'
| 'color.info'
| 'color.background'
| 'color.link'
| 'color.base-50'
| 'color.base-50a'
| 'color.base-100'
| 'color.base-100a'
| 'color.base-200'
| 'color.base-200a'
| 'color.base-300'
| 'color.base-300a'
| 'color.base-400'
| 'color.base-400a'
| 'color.base-500'
| 'color.base-600'
| 'color.base-700'
| 'color.base-800'
| 'color.base-900'
| 'color.surface-50'
| 'color.surface-50a'
| 'color.surface-100'
| 'color.surface-100a'
| 'color.surface-200'
| 'color.surface-200a'
| 'color.surface-300'
| 'color.surface-300a'
| 'color.surface-400'
| 'color.surface-400a'
| 'color.surface-500'
| 'color.surface-600'
| 'color.surface-700'
| 'color.surface-800'
| 'color.surface-900'
| 'color.primary-50'
| 'color.primary-50a'
| 'color.primary-100'
| 'color.primary-100a'
| 'color.primary-200'
| 'color.primary-200a'
| 'color.primary-300'
| 'color.primary-300a'
| 'color.primary-400'
| 'color.primary-400a'
| 'color.primary-500'
| 'color.primary-600'
| 'color.primary-700'
| 'color.primary-800'
| 'color.primary-900'
| 'color.secondary-50'
| 'color.secondary-50a'
| 'color.secondary-100'
| 'color.secondary-100a'
| 'color.secondary-200'
| 'color.secondary-200a'
| 'color.secondary-300'
| 'color.secondary-300a'
| 'color.secondary-400'
| 'color.secondary-400a'
| 'color.secondary-500'
| 'color.secondary-600'
| 'color.secondary-700'
| 'color.secondary-800'
| 'color.secondary-900'
| 'color.danger-50'
| 'color.danger-50a'
| 'color.danger-100'
| 'color.danger-100a'
| 'color.danger-200'
| 'color.danger-200a'
| 'color.danger-300'
| 'color.danger-300a'
| 'color.danger-400'
| 'color.danger-400a'
| 'color.danger-500'
| 'color.danger-600'
| 'color.danger-700'
| 'color.danger-800'
| 'color.danger-900'
| 'color.warning-50'
| 'color.warning-50a'
| 'color.warning-100'
| 'color.warning-100a'
| 'color.warning-200'
| 'color.warning-200a'
| 'color.warning-300'
| 'color.warning-300a'
| 'color.warning-400'
| 'color.warning-400a'
| 'color.warning-500'
| 'color.warning-600'
| 'color.warning-700'
| 'color.warning-800'
| 'color.warning-900'
| 'color.success-50'
| 'color.success-50a'
| 'color.success-100'
| 'color.success-100a'
| 'color.success-200'
| 'color.success-200a'
| 'color.success-300'
| 'color.success-300a'
| 'color.success-400'
| 'color.success-400a'
| 'color.success-500'
| 'color.success-600'
| 'color.success-700'
| 'color.success-800'
| 'color.success-900'
| 'color.info-50'
| 'color.info-50a'
| 'color.info-100'
| 'color.info-100a'
| 'color.info-200'
| 'color.info-200a'
| 'color.info-300'
| 'color.info-300a'
| 'color.info-400'
| 'color.info-400a'
| 'color.info-500'
| 'color.info-600'
| 'color.info-700'
| 'color.info-800'
| 'color.info-900'
| 'type.base.root'
| 'type.base.size'
| 'type.base.leadSize'
| 'type.base.line'
| 'type.base.color'
| 'type.base.family'
| 'type.base.style'
| 'type.base.settings'
| 'type.base.case'
| 'type.base.light'
| 'type.base.regular'
| 'type.base.medium'
| 'type.base.bold'
| 'type.base.weight'
| 'type.base.antialiasing'
| 'type.heading.family'
| 'type.heading.style'
| 'type.heading.settings'
| 'type.heading.case'
| 'type.heading.light'
| 'type.heading.regular'
| 'type.heading.medium'
| 'type.heading.bold'
| 'type.heading.weight'
| 'type.heading.textTransform'
| 'type.overline.family'
| 'type.overline.style'
| 'type.overline.settings'
| 'type.overline.case'
| 'type.overline.light'
| 'type.overline.regular'
| 'type.overline.medium'
| 'type.overline.bold'
| 'type.overline.weight'
| 'type.overline.textTransform'
| 'shape.rounded'
| 'shape.ellipsoid'
| 'layout.space'
| 'layout.border'
| 'layout.min'
| 'layout.max'
| 'button.type.family'
| 'button.type.style'
| 'button.type.settings'
| 'button.type.case'
| 'button.type.weight'
| 'button.shape.border'
| 'button.shape.rounded'
| 'boxShadow.inset'
| 'boxShadow.input'
| 'boxShadow.elevationA'
| 'boxShadow.elevationB'
| 'boxShadow.elevationC'
| 'boxShadow.elevationD'
| 'mediaRanges.xsmall'
| 'mediaRanges.small'
| 'mediaRanges.medium'
| 'mediaRanges.large'
| 'mediaRanges.xlarge';
export type ThemeValReturn = (props: {
theme: DefaultTheme;
}) => string | number;
/**
* Returns a function to be used with styled-components and gets a value from
* the theme property.
*
* @param {string} path The path to get from theme
*/
function themeVal(path: ThemeValPath): ThemeValReturn;
/**
* Allows a function to be used with style-components interpolation, passing the
* component props to each one of the functions arguments if those arguments are
* functions.
*
* Useful in conjunction with themeVal. Instead of:
* ${(props) => rgba(props.theme.colors.primaryColor, 0.16)}
* you can do
* ${rgbaFn(themeVal('colors.primaryColor'), 0.16)}
*
* @param {function} fn The function to wrap.
*
* @returns {function} Curried function
*/
function stylizeFunction(
fn: (...args: Array<any>) => any
): FlattenSimpleInterpolation;
/**
* Returns the layout.space value form the theme multiplied by the
* given multiplier.
*
* @param {number} m multiplier
*/
function glsp(...multiplier: number[]): FlattenSimpleInterpolation | string;
/**
* Polished rgba function but stylized.
*/
function rgba(fn: (...args: Array<any>) => any): any;
/**
* Return a function that when executed appends the `unit` to the value.
*/
function unitify(unit: string): (v: any) => any;
/**
* Return the given value with `rem` appended.
* If value is a function will execute it. This allows to use directly in
* styled-components with themeVal
*/
function rem(v: any): any;
/**
* Return the given value with `px` appended.
* If value is a function will execute it. This allows to use directly in
* styled-components with themeVal
*/
function px(v: any): any;
/**
* Convert the given value to pixels using the base size defined in the theme.
* (theme.type.base.root)
* If value is a function will execute it. This allows to use directly in
* styled-components with themeVal
*/
function val2px(v: any): any;
/**
* Convert the given value to rem using the base size defined in the theme.
* (theme.type.base.root)
* If value is a function will execute it. This allows to use directly in
* styled-components with themeVal
*/
function val2rem(v: any): any;
}