ab-tests
Version:
HBUI library
264 lines (262 loc) • 6.36 kB
JavaScript
const extend = {
opacity: { 5: "0.05", 10: "0.1", 20: "0.2", 50: "0.5" },
colors: {
black: "#000000",
blue: {
50: "#eaf4ff",
100: "#bfdcff",
200: "#a0cbff",
300: "#75b3ff",
400: "#5aa4ff",
500: "#318dff",
600: "#2d80e8",
700: "#2364b5",
800: "#1b4e8c",
900: "#153b6b",
},
brand: {
50: "#e6f9fa",
100: "#b0ecf0",
200: "#8ae3e8",
300: "#54d6de",
400: "#33ced8",
500: "#00c2ce",
600: "#008a92",
800: "#006b71",
900: "#005157",
},
"button-state-colors": {
"danger-active": "#a73e3e",
"danger-hovered": "#d64f4f",
"info-active": "#2364b5",
"info-hovered": "#2d80e8",
"success-active": "#008a92",
"success-hovered": "#00b1bb",
"warning-active": "#aa601c",
"warning-hovered": "#da7b23",
},
dark: {
"bg-primary": "#151819",
"bg-quaternary": "#3e4347",
"bg-quintenary": "#484d51",
"bg-secondary": "#1e2224",
"bg-tertiary": "#282c2f",
"border-primary": "#323639",
"border-quaternary": "#989fa4",
"border-quintenary": "#c9cdcf",
"border-secondary": "#484d51",
"border-tertiary": "#788187",
"text-primary": "#ffffff",
"text-quaternary": "#aeb4b7",
"text-quintenary": "#939b9f",
"text-secondary": "#f1f3f3",
"text-tertiary": "#dfe1e2",
},
green: {
50: "#e6f9fa",
100: "#b0ecf0",
200: "#8ae3e8",
300: "#54d6de",
400: "#33ced8",
500: "#00c2ce",
600: "#00b1bb",
700: "#008a92",
800: "#006b71",
900: "#005157",
},
"grey-dark": {
50: "#989fa4",
100: "#788187",
200: "#484d51",
300: "#3e4347",
400: "#323639",
500: "#282c2f",
600: "#1e2224",
700: "#151819",
800: "#070808",
900: "#000000",
},
"grey-light": {
50: "#fcfcfc",
100: "#fafafa",
200: "#f1f3f3",
300: "#e9ebec",
400: "#dfe1e2",
500: "#c9cdcf",
600: "#aeb4b7",
700: "#939b9f",
800: "#868e93",
900: "#767f84",
},
light: {
"bg-primary": "#ffffff",
"bg-quaternary": "#dfe1e2",
"bg-quintenary": "#c9cdcf",
"bg-secondary": "#fafafa",
"bg-tertiary": "#f1f3f3",
"border-primary": "#f1f3f3",
"border-quaternary": "#c9cdcf",
"border-quintenary": "#aeb4b7",
"border-secondary": "#e9ebec",
"border-tertiary": "#dfe1e2",
"text-primary": "#151819",
"text-quaternary": "#788187",
"text-quintenary": "#989fa4",
"text-secondary": "#1e2224",
"text-tertiary": "#323639",
},
magenta: {
50: "#fcedff",
100: "#f7c7ff",
200: "#f3abff",
300: "#ee85ff",
400: "#ea6dff",
500: "#e549ff",
600: "#d042e8",
700: "#a334b5",
800: "#7e288c",
900: "#601f6b",
},
orange: {
50: "#fef3e9",
100: "#fadabc",
200: "#f8c89c",
300: "#f5af6e",
400: "#f39f52",
500: "#f08727",
600: "#da7b23",
700: "#aa601c",
800: "#844a15",
900: "#653910",
},
purple: {
50: "#efe6fd",
100: "#ceb0fa",
200: "#b78af7",
300: "#9654f4",
400: "#8133f1",
500: "#6200ee",
600: "#5900d9",
700: "#4600a9",
800: "#360083",
900: "#290064",
},
red: {
50: "#fdeeee",
100: "#f9cbcb",
200: "#f6b2b2",
300: "#f28e8e",
400: "#ef7979",
500: "#eb5757",
600: "#d64f4f",
700: "#a73e3e",
800: "#813030",
900: "#632525",
},
terminal: "#5fffd7",
white: "#ffffff",
yellow: {
50: "#fffbe8",
100: "#fef4b7",
200: "#feee94",
300: "#fde764",
400: "#fde245",
500: "#fcdb17",
600: "#e5c715",
700: "#b39b10",
800: "#8b780d",
900: "#6a5c0a",
},
},
borderWidth: { dashed: "1px", divider: "4px", dots: "1px", solid: "1px" },
borderColor: {
dashed: "#f1f3f3",
divider: "#f1f3f3",
dots: "#f1f3f3",
solid: "#f1f3f3",
},
spacing: {
xxs: "8px",
xs: "16px",
sm: "24px",
md: "32px",
lg: "48px",
xl: "64px",
xxl: "80px",
xxxl: "120px",
},
boxShadow: {
shadow: "0px 1px 2px -1px #000000, 0px 1px 3px #000000",
"shadow-2-xl": "0px 25px 50px -12px #000000",
"shadow-inner": "inset 0px 2px 4px #000000",
"shadow-lg": "0px 4px 6px -4px #000000, 0px 10px 15px -3px #000000",
"shadow-md": "0px 2px 4px -2px #000000, 0px 4px 6px -1px #000000",
"shadow-sm": "0px 1px 2px #000000",
"shadow-xl": "0px 8px 10px -6px #000000, 0px 20px 25px -5px #000000",
},
fontSize: {
"text-xxs": "0.6875rem",
"text-xs": "0.8125rem",
"text-sm": "0.875rem",
"text-base": "1rem",
"text-lg": "1.125rem",
"text-xl": "1.25rem",
"text-2-xl": "1.5rem",
"text-3-xl": "1.875rem",
"text-4-xl": "2.25rem",
"text-5-xl": "3rem",
"text-6-xl": "3.75rem",
"text-7-xl": "4.5rem",
"text-8-xl": "6rem",
"text-9-xl": "8rem",
},
lineHeight: {
"text-xs": "16px",
"text-xxs": "16px",
"text-sm": "20px",
"text-base": "24px",
"text-lg": "28px",
"text-xl": "28px",
"text-2-xl": "32px",
"text-3-xl": "36px",
"text-4-xl": "40px",
"text-5-xl": "48px",
"text-6-xl": "60px",
"text-7-xl": "72px",
"text-8-xl": "96px",
"text-9-xl": "128px",
},
fontFamily: {
"text-2-xl": ["Satoshi-Regular"],
"text-3-xl": ["Satoshi-Regular"],
"text-4-xl": ["Satoshi-Regular"],
"text-5-xl": ["Satoshi-Regular"],
"text-6-xl": ["Satoshi-Regular"],
"text-7-xl": ["Satoshi-Regular"],
"text-8-xl": ["Satoshi-Regular"],
"text-9-xl": ["Satoshi-Regular"],
"text-base": ["Inter-Regular"],
"text-lg": ["Inter-Regular"],
"text-sm": ["Inter-Regular"],
"text-xl": ["Satoshi-Regular"],
"text-xs": ["Inter-Medium"],
"text-xxs": ["Inter-Medium"],
},
fontWeight: {
"text-2-xl": 400,
"text-3-xl": 400,
"text-4-xl": 400,
"text-5-xl": 400,
"text-6-xl": 400,
"text-7-xl": 400,
"text-8-xl": 400,
"text-9-xl": 400,
"text-base": 400,
"text-lg": 400,
"text-sm": 400,
"text-xl": 400,
"text-xs": 500,
"text-xxs": 500,
},
};
module.exports = extend;