2021-01-27 18:54:25 +01:00
|
|
|
/**
|
|
|
|
* A note about the existence of both singular and plural variable names here:
|
|
|
|
* When dealing with a literal property name, e.g. ALIGN_ITEMS, the constant
|
|
|
|
* should match the property. When detailing a collection of things, it should
|
|
|
|
* match the plural form of the thing. e.g. COLORS, TYPOGRAPHY
|
|
|
|
*/
|
2022-08-11 21:22:06 +02:00
|
|
|
|
|
|
|
import { pick } from 'lodash';
|
|
|
|
|
2021-01-19 17:30:29 +01:00
|
|
|
export const COLORS = {
|
2022-03-01 19:23:20 +01:00
|
|
|
BACKGROUND_DEFAULT: 'background-default',
|
|
|
|
BACKGROUND_ALTERNATIVE: 'background-alternative',
|
|
|
|
TEXT_DEFAULT: 'text-default',
|
|
|
|
TEXT_ALTERNATIVE: 'text-alternative',
|
|
|
|
TEXT_MUTED: 'text-muted',
|
|
|
|
ICON_DEFAULT: 'icon-default',
|
2022-08-09 22:03:25 +02:00
|
|
|
ICON_ALTERNATIVE: 'icon-alternative',
|
2022-03-01 19:23:20 +01:00
|
|
|
ICON_MUTED: 'icon-muted',
|
|
|
|
BORDER_DEFAULT: 'border-default',
|
|
|
|
BORDER_MUTED: 'border-muted',
|
|
|
|
OVERLAY_DEFAULT: 'overlay-default',
|
|
|
|
OVERLAY_INVERSE: 'overlay-inverse',
|
|
|
|
PRIMARY_DEFAULT: 'primary-default',
|
|
|
|
PRIMARY_ALTERNATIVE: 'primary-alternative',
|
|
|
|
PRIMARY_MUTED: 'primary-muted',
|
|
|
|
PRIMARY_INVERSE: 'primary-inverse',
|
|
|
|
PRIMARY_DISABLED: 'primary-disabled',
|
|
|
|
ERROR_DEFAULT: 'error-default',
|
|
|
|
ERROR_ALTERNATIVE: 'error-alternative',
|
|
|
|
ERROR_MUTED: 'error-muted',
|
|
|
|
ERROR_INVERSE: 'error-inverse',
|
|
|
|
ERROR_DISABLED: 'error-disabled',
|
|
|
|
WARNING_DEFAULT: 'warning-default',
|
|
|
|
WARNING_ALTERNATIVE: 'warning-alternative',
|
|
|
|
WARNING_MUTED: 'warning-muted',
|
|
|
|
WARNING_INVERSE: 'warning-inverse',
|
|
|
|
WARNING_DISABLED: 'warning-disabled',
|
|
|
|
SUCCESS_DEFAULT: 'success-default',
|
|
|
|
SUCCESS_ALTERNATIVE: 'success-alternative',
|
|
|
|
SUCCESS_MUTED: 'success-muted',
|
|
|
|
SUCCESS_INVERSE: 'success-inverse',
|
|
|
|
SUCCESS_DISABLED: 'success-disabled',
|
|
|
|
INFO_DEFAULT: 'info-default',
|
|
|
|
INFO_ALTERNATIVE: 'info-alternative',
|
|
|
|
INFO_MUTED: 'info-muted',
|
|
|
|
INFO_INVERSE: 'info-inverse',
|
|
|
|
INFO_DISABLED: 'info-disabled',
|
|
|
|
MAINNET: 'mainnet',
|
|
|
|
GOERLI: 'goerli',
|
2022-09-14 20:26:45 +02:00
|
|
|
SEPOLIA: 'sepolia',
|
2022-03-01 19:23:20 +01:00
|
|
|
LOCALHOST: 'localhost',
|
2022-08-13 00:14:59 +02:00
|
|
|
TRANSPARENT: 'transparent',
|
2022-08-11 21:22:06 +02:00
|
|
|
INHERIT: 'inherit',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2022-08-11 21:22:06 +02:00
|
|
|
export const BACKGROUND_COLORS = pick(COLORS, [
|
|
|
|
'BACKGROUND_DEFAULT',
|
|
|
|
'BACKGROUND_ALTERNATIVE',
|
|
|
|
'OVERLAY_DEFAULT',
|
|
|
|
'PRIMARY_DEFAULT',
|
|
|
|
'PRIMARY_ALTERNATIVE',
|
|
|
|
'PRIMARY_MUTED',
|
|
|
|
'ERROR_DEFAULT',
|
|
|
|
'ERROR_ALTERNATIVE',
|
|
|
|
'ERROR_MUTED',
|
|
|
|
'WARNING_DEFAULT',
|
|
|
|
'WARNING_ALTERNATIVE',
|
|
|
|
'WARNING_MUTED',
|
|
|
|
'SUCCESS_DEFAULT',
|
|
|
|
'SUCCESS_ALTERNATIVE',
|
|
|
|
'SUCCESS_MUTED',
|
|
|
|
'INFO_DEFAULT',
|
|
|
|
'INFO_ALTERNATIVE',
|
|
|
|
'INFO_MUTED',
|
|
|
|
'MAINNET',
|
|
|
|
'GOERLI',
|
2022-09-14 20:26:45 +02:00
|
|
|
'SEPOLIA',
|
2022-08-11 21:22:06 +02:00
|
|
|
'TRANSPARENT',
|
|
|
|
'LOCALHOST',
|
|
|
|
]);
|
|
|
|
|
|
|
|
export const BORDER_COLORS = pick(COLORS, [
|
|
|
|
'BORDER_DEFAULT',
|
|
|
|
'BORDER_MUTED',
|
|
|
|
'PRIMARY_DEFAULT',
|
|
|
|
'PRIMARY_ALTERNATIVE',
|
|
|
|
'PRIMARY_MUTED',
|
|
|
|
'ERROR_DEFAULT',
|
|
|
|
'ERROR_ALTERNATIVE',
|
|
|
|
'ERROR_MUTED',
|
|
|
|
'WARNING_DEFAULT',
|
|
|
|
'WARNING_ALTERNATIVE',
|
|
|
|
'WARNING_MUTED',
|
|
|
|
'SUCCESS_DEFAULT',
|
|
|
|
'SUCCESS_ALTERNATIVE',
|
|
|
|
'SUCCESS_MUTED',
|
|
|
|
'INFO_DEFAULT',
|
|
|
|
'INFO_ALTERNATIVE',
|
|
|
|
'INFO_MUTED',
|
|
|
|
'MAINNET',
|
|
|
|
'GOERLI',
|
2022-09-14 20:26:45 +02:00
|
|
|
'SEPOLIA',
|
2022-08-11 21:22:06 +02:00
|
|
|
'TRANSPARENT',
|
|
|
|
'LOCALHOST',
|
|
|
|
]);
|
2021-01-19 17:30:29 +01:00
|
|
|
|
2022-08-11 21:22:06 +02:00
|
|
|
export const TEXT_COLORS = pick(COLORS, [
|
|
|
|
'TEXT_DEFAULT',
|
|
|
|
'TEXT_ALTERNATIVE',
|
|
|
|
'TEXT_MUTED',
|
|
|
|
'OVERLAY_INVERSE',
|
|
|
|
'PRIMARY_DEFAULT',
|
|
|
|
'PRIMARY_INVERSE',
|
|
|
|
'ERROR_DEFAULT',
|
|
|
|
'ERROR_INVERSE',
|
|
|
|
'SUCCESS_DEFAULT',
|
|
|
|
'SUCCESS_INVERSE',
|
2022-08-13 00:14:59 +02:00
|
|
|
'WARNING_DEFAULT',
|
2022-08-11 21:22:06 +02:00
|
|
|
'WARNING_INVERSE',
|
|
|
|
'INFO_DEFAULT',
|
|
|
|
'INFO_INVERSE',
|
2022-08-13 00:14:59 +02:00
|
|
|
'INHERIT',
|
2022-08-11 21:22:06 +02:00
|
|
|
]);
|
2022-08-18 16:53:01 +02:00
|
|
|
|
|
|
|
export const ICON_COLORS = pick(COLORS, [
|
|
|
|
'ICON_DEFAULT',
|
|
|
|
'ICON_ALTERNATIVE',
|
|
|
|
'ICON_MUTED',
|
|
|
|
'OVERLAY_INVERSE',
|
|
|
|
'PRIMARY_DEFAULT',
|
|
|
|
'PRIMARY_INVERSE',
|
|
|
|
'ERROR_DEFAULT',
|
|
|
|
'ERROR_INVERSE',
|
|
|
|
'SUCCESS_DEFAULT',
|
|
|
|
'SUCCESS_INVERSE',
|
|
|
|
'WARNING_DEFAULT',
|
|
|
|
'WARNING_INVERSE',
|
|
|
|
'INFO_DEFAULT',
|
|
|
|
'INFO_INVERSE',
|
|
|
|
'INHERIT',
|
|
|
|
]);
|
|
|
|
|
2021-01-19 17:30:29 +01:00
|
|
|
export const TYPOGRAPHY = {
|
|
|
|
H1: 'h1',
|
|
|
|
H2: 'h2',
|
|
|
|
H3: 'h3',
|
|
|
|
H4: 'h4',
|
|
|
|
H5: 'h5',
|
|
|
|
H6: 'h6',
|
|
|
|
H7: 'h7',
|
|
|
|
H8: 'h8',
|
|
|
|
H9: 'h9',
|
2021-09-28 07:50:21 +02:00
|
|
|
Paragraph: 'p',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
2022-08-18 19:51:53 +02:00
|
|
|
export const TEXT = {
|
|
|
|
DISPLAY_MD: 'display-md',
|
|
|
|
HEADING_LG: 'heading-lg',
|
|
|
|
HEADING_MD: 'heading-md',
|
|
|
|
HEADING_SM: 'heading-sm',
|
|
|
|
BODY_LG: 'body-lg-medium',
|
|
|
|
BODY_MD: 'body-md',
|
|
|
|
BODY_SM: 'body-sm',
|
|
|
|
BODY_XS: 'body-xs',
|
2022-10-04 18:55:51 +02:00
|
|
|
INHERIT: 'inherit',
|
2022-08-18 19:51:53 +02:00
|
|
|
};
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const NONE = 'none';
|
2021-01-27 18:54:25 +01:00
|
|
|
|
|
|
|
export const SIZES = {
|
2022-08-13 00:14:59 +02:00
|
|
|
XXS: 'xxs',
|
2021-01-27 18:54:25 +01:00
|
|
|
XS: 'xs',
|
|
|
|
SM: 'sm',
|
|
|
|
MD: 'md',
|
|
|
|
LG: 'lg',
|
|
|
|
XL: 'xl',
|
2022-10-04 18:55:51 +02:00
|
|
|
AUTO: 'auto', // Used for Text, Icon, and Button components to inherit the parent elements font-size
|
2021-01-27 18:54:25 +01:00
|
|
|
NONE,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
|
|
|
export const BORDER_STYLE = {
|
|
|
|
DASHED: 'dashed',
|
|
|
|
SOLID: 'solid',
|
|
|
|
DOTTED: 'dotted',
|
|
|
|
DOUBLE: 'double',
|
|
|
|
NONE,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
2022-10-07 17:38:23 +02:00
|
|
|
export const BORDER_RADIUS = {
|
|
|
|
XS: SIZES.XS,
|
|
|
|
SM: SIZES.SM,
|
|
|
|
MD: SIZES.MD,
|
|
|
|
LG: SIZES.LG,
|
|
|
|
XL: SIZES.XL,
|
|
|
|
NONE,
|
|
|
|
PILL: 'pill',
|
|
|
|
};
|
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
const FLEX_END = 'flex-end';
|
|
|
|
const FLEX_START = 'flex-start';
|
|
|
|
const CENTER = 'center';
|
2021-01-27 18:54:25 +01:00
|
|
|
|
|
|
|
export const ALIGN_ITEMS = {
|
|
|
|
FLEX_START,
|
|
|
|
FLEX_END,
|
|
|
|
CENTER,
|
|
|
|
BASELINE: 'baseline',
|
|
|
|
STRETCH: 'stretch',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
|
|
|
export const JUSTIFY_CONTENT = {
|
|
|
|
FLEX_START,
|
|
|
|
FLEX_END,
|
|
|
|
CENTER,
|
|
|
|
SPACE_AROUND: 'space-around',
|
|
|
|
SPACE_BETWEEN: 'space-between',
|
|
|
|
SPACE_EVENLY: 'space-evenly',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
2021-10-06 20:52:25 +02:00
|
|
|
export const FLEX_DIRECTION = {
|
|
|
|
ROW: 'row',
|
|
|
|
ROW_REVERSE: 'row-reverse',
|
|
|
|
COLUMN: 'column',
|
|
|
|
COLUMN_REVERSE: 'column-reverse',
|
|
|
|
};
|
|
|
|
|
2021-11-01 20:16:23 +01:00
|
|
|
export const FLEX_WRAP = {
|
|
|
|
WRAP: 'wrap',
|
|
|
|
WRAP_REVERSE: 'wrap-reverse',
|
|
|
|
NO_WRAP: 'nowrap',
|
|
|
|
};
|
|
|
|
|
2021-01-27 18:54:25 +01:00
|
|
|
export const DISPLAY = {
|
|
|
|
BLOCK: 'block',
|
|
|
|
FLEX: 'flex',
|
|
|
|
GRID: 'grid',
|
|
|
|
INLINE_BLOCK: 'inline-block',
|
2022-07-20 22:47:51 +02:00
|
|
|
INLINE: 'inline',
|
2021-01-27 18:54:25 +01:00
|
|
|
INLINE_FLEX: 'inline-flex',
|
|
|
|
INLINE_GRID: 'inline-grid',
|
|
|
|
LIST_ITEM: 'list-item',
|
2022-07-20 22:47:51 +02:00
|
|
|
NONE: 'none',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
2022-02-15 01:02:51 +01:00
|
|
|
export const FRACTIONS = {
|
2021-01-27 18:54:25 +01:00
|
|
|
HALF: '1/2',
|
|
|
|
ONE_THIRD: '1/3',
|
|
|
|
TWO_THIRDS: '2/3',
|
|
|
|
ONE_FOURTH: '1/4',
|
|
|
|
TWO_FOURTHS: '2/4',
|
|
|
|
THREE_FOURTHS: '3/4',
|
|
|
|
ONE_FIFTH: '1/5',
|
|
|
|
TWO_FIFTHS: '2/5',
|
|
|
|
THREE_FIFTHS: '3/5',
|
|
|
|
FOUR_FIFTHS: '4/5',
|
|
|
|
ONE_SIXTH: '1/6',
|
|
|
|
TWO_SIXTHS: '2/6',
|
|
|
|
THREE_SIXTHS: '3/6',
|
|
|
|
FOUR_SIXTHS: '4/6',
|
|
|
|
FIVE_SIXTHS: '5/6',
|
|
|
|
ONE_TWELFTH: '1/12',
|
|
|
|
TWO_TWELFTHS: '2/12',
|
|
|
|
THREE_TWELFTHS: '3/12',
|
|
|
|
FOUR_TWELFTHS: '4/12',
|
|
|
|
FIVE_TWELFTHS: '5/12',
|
|
|
|
SIX_TWELFTHS: '6/12',
|
|
|
|
SEVEN_TWELFTHS: '7/12',
|
|
|
|
EIGHT_TWELFTHS: '8/12',
|
|
|
|
NINE_TWELFTHS: '9/12',
|
|
|
|
TEN_TWELFTHS: '10/12',
|
|
|
|
ELEVEN_TWELFTHS: '11/12',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
|
|
|
export const BLOCK_SIZES = {
|
|
|
|
...FRACTIONS,
|
|
|
|
SCREEN: 'screen',
|
|
|
|
MAX: 'max',
|
|
|
|
MIN: 'min',
|
|
|
|
FULL: 'full',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
|
|
|
export const TEXT_ALIGN = {
|
|
|
|
LEFT: 'left',
|
|
|
|
CENTER: 'center',
|
|
|
|
RIGHT: 'right',
|
|
|
|
JUSTIFY: 'justify',
|
2021-06-24 01:39:44 +02:00
|
|
|
END: 'end',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-01-27 18:54:25 +01:00
|
|
|
|
2022-08-18 19:51:53 +02:00
|
|
|
export const TEXT_TRANSFORM = {
|
|
|
|
UPPERCASE: 'uppercase',
|
|
|
|
LOWERCASE: 'lowercase',
|
|
|
|
CAPITALIZE: 'capitalize',
|
|
|
|
};
|
|
|
|
|
2021-01-27 18:54:25 +01:00
|
|
|
export const FONT_WEIGHT = {
|
|
|
|
BOLD: 'bold',
|
2022-08-18 19:51:53 +02:00
|
|
|
MEDIUM: 'medium',
|
2021-01-27 18:54:25 +01:00
|
|
|
NORMAL: 'normal',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-02-01 19:10:19 +01:00
|
|
|
|
2021-12-14 00:41:10 +01:00
|
|
|
export const OVERFLOW_WRAP = {
|
|
|
|
BREAK_WORD: 'break-word',
|
|
|
|
NORMAL: 'normal',
|
|
|
|
};
|
|
|
|
|
2021-09-01 20:02:01 +02:00
|
|
|
export const FONT_STYLE = {
|
|
|
|
ITALIC: 'italic',
|
|
|
|
NORMAL: 'normal',
|
|
|
|
};
|
|
|
|
|
2021-02-01 19:10:19 +01:00
|
|
|
export const SEVERITIES = {
|
|
|
|
DANGER: 'danger',
|
|
|
|
WARNING: 'warning',
|
|
|
|
INFO: 'info',
|
|
|
|
SUCCESS: 'success',
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2021-12-03 17:54:29 +01:00
|
|
|
|
|
|
|
export const RESIZE = {
|
|
|
|
NONE: 'none',
|
|
|
|
BOTH: 'both',
|
|
|
|
HORIZONTAL: 'horizontal',
|
|
|
|
VERTICAL: 'vertical',
|
|
|
|
INITIAL: 'initial',
|
|
|
|
INHERIT: 'inherit',
|
|
|
|
};
|
2022-07-20 22:47:51 +02:00
|
|
|
|
|
|
|
export const BREAKPOINTS = ['base', 'sm', 'md', 'lg'];
|