onecart-ui
Version:
Cross-platform React and React Native component library with white-label support
428 lines (427 loc) • 10.4 kB
JSON
{
"border-radius-tooltip": {
"default": "0.25rem"
},
"border-radius-popover": {
"default": "0.5rem"
},
"border-radius-tag": {
"sm": "0.25rem",
"xl": "62.4rem"
},
"border-radius-button": {
"sm": "0.25rem",
"full": "62.4rem"
},
"border-radius-input": {
"sm": "0.25rem",
"lg": "0.5rem"
},
"border-radius-card": {
"sm": "0.25rem",
"md": "0.5rem",
"lg": "0.75rem"
},
"border-radius-modal": {
"lg": "0.75rem",
"xl": "1rem"
},
"border": {
"radius-none": 0,
"radius-xs": "0.25rem",
"radius-sm": "0.5rem",
"radius-md": "0.75rem",
"radius-lg": "1rem",
"radius-xl": "1.25rem",
"radius-2xl": "1.5rem",
"radius-3xl": "1.75rem",
"radius-full": "62.4rem",
"width-button-default": "0.0625rem",
"width-button-hover": "0.125rem",
"width-button-pressed": "0.125rem",
"width-input-default": "0.0625rem",
"width-input-focus": "0.125rem",
"width-input-error": "0.125rem",
"width-card-default": "0.0625rem",
"width-card-hover": "0.125rem",
"width-none": 0,
"width-xs": "0.0625rem",
"width-sm": "0.125rem",
"width-md": "0.25rem",
"green": "#00df88",
"blue": "#0053e2",
"yellow": "#f4b400",
"red": "#a90000",
"dark": "#111",
"light": "#e2e2e2",
"lighter": "#f1f1f1"
},
"layout": {
"spacing-inline-none": 0,
"spacing-inline-3xs": "0.125rem",
"spacing-inline-2xs": "0.25rem",
"spacing-inline-xs": "0.5rem",
"spacing-inline-sm": "0.75rem",
"spacing-inline-md": "1rem",
"spacing-inline-lg": "2rem",
"spacing-inline-xl": "2.5rem",
"spacing-inline-2xl": "5rem",
"spacing-stack-none": 0,
"spacing-stack-3xs": "0.125rem",
"spacing-stack-2xs": "0.25rem",
"spacing-stack-xs": "0.5rem",
"spacing-stack-sm": "0.75rem",
"spacing-stack-md": "1rem",
"spacing-stack-lg": "2rem",
"spacing-stack-xl": "2.5rem",
"spacing-stack-2xl": "5rem"
},
"section": {
"spacing-sm": "1.5rem",
"spacing-md": "1.75rem",
"spacing-lg": "2rem",
"spacing-xl": "2.5rem",
"spacing-2xl": "3.5rem",
"spacing-3xl": "5rem"
},
"component": {
"card-sm": "0.75rem",
"card-md": "1.25rem",
"card-lg": "1.5rem",
"card-xl": "2rem",
"card-2xl": "2.5rem",
"modal-sm": "1.25rem",
"modal-md": "1.5rem",
"modal-lg": "1.75rem"
},
"space-0": 0,
"space-3xs": "0.125rem",
"space-2xs": "0.25rem",
"space-xs": "0.5rem",
"space-sm": "0.75rem",
"space-md": "1rem",
"space-lg": "1.25rem",
"space-xl": "1.5rem",
"space-2xl": "1.75rem",
"space-3xl": "2rem",
"space-4xl": "2.5rem",
"space-5xl": "3rem",
"space-6xl": "3.5rem",
"space-7xl": "4rem",
"space-8xl": "5rem",
"xs": "0.75rem",
"s": "1rem",
"md": "1.25rem",
"lg": "1.5rem",
"xl": "1.75rem",
"2xl": "2rem",
"background": {
"yellow-light": "#fff5d9",
"yellow-medium": "#ffe7a5",
"blue-light": "#e3ebff",
"blue-medium": "#c3deff",
"green-light": "#E5FCF3",
"green-medium": "#ccf9e7",
"green-dark": "#00df88",
"red-light": "#feecec",
"red-medium": "#fed8d8",
"white-light": "#ffffff",
"neutral-dark": "#111",
"neutral-grey": "#e2e2e2",
"neutral-light": "#f1f1f1"
},
"text": {
"inverse": "#ffffff",
"disabled": "#ababab",
"placeholder": "#919191",
"tertiary": "#525252",
"body": "#3b3b3b",
"header": "#111",
"green": "#00df88",
"blue": "#0053e2",
"error": "#a90000",
"yellow": "#f4b400"
},
"feedback": {
"alert-success": "#00df88",
"alert-error": "#a90000",
"alert-warning": "#fff5d9",
"alert-neutral": "#111"
},
"action": {
"primary-default": "#00df88",
"primary-hover": "#4ce9ac",
"primary-active": "#98f2cf",
"primary-disabled": "#E5FCF3",
"secondary-default": "#0053e2",
"secondary-hover": "#254cac",
"secondary-active": "#9ec1ff",
"secondary-disabled": "#e3ebff",
"destructive-default": "#d60000",
"destructive-hover": "#a90000",
"destructive-active": "#fed8d8",
"destructive-disable": "#feecec",
"tertiary-default": "#3b3b3b",
"tertiary-hover": "#111",
"tertiary-active": "#ababab",
"tertiary-disable": "#f1f1f1"
},
"icon": {
"yellow": "#f4b400",
"blue": "#0053e2",
"green": "#00df88",
"red": "#a90000",
"neutral": "#111",
"light": "#e2e2e2",
"lighter": "#f1f1f1"
},
"green-10": "#E5FCF3",
"green-20": "#ccf9e7",
"green-30": "#B2F5DB",
"green-40": "#98f2cf",
"green-50": "#81efc3",
"green-60": "#66ecb8",
"green-70": "#4ce9ac",
"green-80": "#31e5a0",
"green-90": "#1ae294",
"green-100": "#00df88",
"neutral-10": "#f1f1f1",
"neutral-20": "#e2e2e2",
"neutral-30": "#c6c6c6",
"neutral-40": "#ababab",
"neutral-50": "#919191",
"neutral-60": "#6a6a6a",
"neutral-70": "#525252",
"neutral-80": "#3b3b3b",
"neutral-90": "#262626",
"neutral-100": "#111",
"blue-10": "#e3ebff",
"blue-20": "#c3deff",
"blue-30": "#9ec1ff",
"blue-40": "#5c83fd",
"blue-50": "#446ef5",
"blue-60": "#0053e2",
"blue-70": "#254cac",
"blue-80": "#14328d",
"blue-90": "#0c285f",
"blue-100": "#071e3c",
"red-10": "#feecec",
"red-20": "#fed8d8",
"red-30": "#feb3b3",
"red-40": "#fe8888",
"red-50": "#fb5959",
"red-60": "#d60000",
"red-70": "#a90000",
"red-80": "#820000",
"red-90": "#550000",
"red-100": "#3a0000",
"yellow-10": "#fff5d9",
"yellow-20": "#ffe7a5",
"yellow-30": "#ffd86b",
"yellow-40": "#ffce46",
"yellow-50": "#ffc420",
"yellow-60": "#f4b400",
"yellow-70": "#dba200",
"yellow-80": "#c69200",
"yellow-90": "#b38400",
"yellow-100": "#9a7100",
"white-10": "#ffffff",
"Display-2xl": {
"fontFamily": "Campton",
"fontWeight": 500,
"lineHeight": "56px",
"fontSize": "52px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"Display": {
"xl": {
"fontFamily": "Campton",
"fontWeight": 500,
"lineHeight": "48px",
"fontSize": "44px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
}
},
"Heading": {
"xl": {
"fontFamily": "Campton",
"fontWeight": 600,
"lineHeight": "48px",
"fontSize": "40px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"lg": {
"fontFamily": "Campton",
"fontWeight": 600,
"lineHeight": "44px",
"fontSize": "36px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"md": {
"fontFamily": "Campton",
"fontWeight": 600,
"lineHeight": "40px",
"fontSize": "32px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"sm": {
"fontFamily": "Campton",
"fontWeight": 600,
"lineHeight": "36px",
"fontSize": "28px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"xs": {
"fontFamily": "Campton",
"fontWeight": 600,
"lineHeight": "28px",
"fontSize": "20px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"2xs": {
"fontFamily": "Campton",
"fontWeight": 600,
"lineHeight": "24px",
"fontSize": "18px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
}
},
"Body": {
"xl": {
"fontFamily": "Campton",
"fontWeight": "book",
"lineHeight": "28px",
"fontSize": "18px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"lg": {
"fontFamily": "Campton",
"fontWeight": "book",
"lineHeight": "24px",
"fontSize": "16px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"md": {
"fontFamily": "Campton",
"fontWeight": "book",
"lineHeight": "20px",
"fontSize": "14px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"sm": {
"fontFamily": "Campton",
"fontWeight": "book",
"lineHeight": "20px",
"fontSize": "12px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
}
},
"Utility": {
"button": {
"fontFamily": "Campton",
"fontWeight": 500,
"lineHeight": "16px",
"fontSize": "16px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
},
"link": {
"fontFamily": "Campton",
"fontWeight": 500,
"lineHeight": "20px",
"fontSize": "14px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "underline"
},
"caption": {
"fontFamily": "Campton",
"fontWeight": "book",
"lineHeight": "16px",
"fontSize": "12px",
"letterSpacing": "0%",
"paragraphIndent": "0px",
"textCase": "none",
"textDecoration": "none"
}
},
"fontFamilies": {
"campton": "Campton"
},
"line-height-6xl": "56px",
"line-height-5xl": "48px",
"line-height-4xl": "44px",
"line-height-3xl": "40px",
"line-height-2xl": "36px",
"line-height-xl": "32px",
"line-height-lg": "28px",
"line-height-md": "24px",
"line-height-s": "20px",
"line-height-xs": "16px",
"medium": 500,
"semi-bold": 600,
"book": "book",
"font-size-2xs": "14px",
"font-size-3xs": "12px",
"font-size-xs": "16px",
"font-size-md": "18px",
"font-size-lg": "20px",
"font-size-xl": "28px",
"font-size-2xl": "32px",
"font-size-3xl": "36px",
"font-size-4xl": "40px",
"font-size-5xl": "44px",
"font-size-6xl": "52px",
"letterSpacing": {
"0": "0%"
},
"textCase": {
"none": "none"
},
"textDecoration": {
"none": "none",
"underline": "underline"
},
"paragraphIndent": {
"0": "0px"
}
}