@particle-network/ui-react
Version:
React UI component library for Particle Network design system
300 lines (296 loc) • 9.36 kB
JavaScript
/* eslint-disable */
const { heroui } = require('@heroui/theme');
const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
gap: {
xs: '0.125rem', // 2px
sm: '0.375rem', // 6px
md: '0.625rem', // 10px
lg: '0.875rem', // 14px
},
spacing: {
xs: '0.125rem', // 2px
sm: '0.375rem', // 6px
md: '0.625rem', // 10px
lg: '0.875rem', // 14px
},
animation: {
blink: 'blink 1s infinite',
'sprite-refresh': 'sprite-refresh 5s steps(270)',
lotterySlideUp: 'lotterySlideUp 7s linear infinite',
},
keyframes: {
lotterySlideUp: {
'0%': { transform: 'translateY(0)' },
'100%': { transform: 'translateY(-50%)' },
},
blink: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0' },
},
'sprite-refresh': {
from: { backgroundPosition: '0 0' },
to: { backgroundPosition: '-13500px 0' },
},
slide: {
'0%': {
transform: 'translateX(1600px)',
},
'100%': {
transform: 'translateX(-800px)',
},
},
},
fontSize: {
xxs: [
'0.625rem',
{
// 10px
lineHeight: '0.75rem', // 12px
},
],
/* 10px */
caption1: ['0.625rem', { lineHeight: '0.875rem' }],
/* 11px */
body3: ['0.6875rem', { lineHeight: '1rem' }],
/* 12px */
body2: ['0.75rem', { lineHeight: '1rem' }],
/* 14px */
body1: ['0.875rem', { lineHeight: '1.125rem' }],
/* 16px */
h4: ['1rem', { lineHeight: '1.25rem' }],
/* 18px */
h3: ['1.125rem', { lineHeight: '1.375rem' }],
/* 20px */
h2: ['1.25rem', { lineHeight: '1.5rem' }],
/* 24px */
h1: ['1.5rem', { lineHeight: '1.75rem' }],
},
colors: {
bullish: 'var(--bullish-color)',
'bullish-foreground': '#FFFFFF',
'bullish/10': 'hsla(var(--bullish-color-hsl), 0.1)',
'bullish/20': 'hsla(var(--bullish-color-hsl), 0.2)',
'bullish/30': 'hsla(var(--bullish-color-hsl), 0.3)',
'bullish/40': 'hsla(var(--bullish-color-hsl), 0.4)',
'bullish/50': 'hsla(var(--bullish-color-hsl), 0.5)',
'bullish/60': 'hsla(var(--bullish-color-hsl), 0.6)',
'bullish/70': 'hsla(var(--bullish-color-hsl), 0.7)',
'bullish/80': 'hsla(var(--bullish-color-hsl), 0.8)',
'bullish/90': 'hsla(var(--bullish-color-hsl), 0.9)',
bearish: 'var(--bearish-color)',
'bearish-foreground': '#FFFFFF',
'bearish/10': 'hsla(var(--bearish-color-hsl), 0.1)',
'bearish/20': 'hsla(var(--bearish-color-hsl), 0.2)',
'bearish/30': 'hsla(var(--bearish-color-hsl), 0.3)',
'bearish/40': 'hsla(var(--bearish-color-hsl), 0.4)',
'bearish/50': 'hsla(var(--bearish-color-hsl), 0.5)',
'bearish/60': 'hsla(var(--bearish-color-hsl), 0.6)',
'bearish/70': 'hsla(var(--bearish-color-hsl), 0.7)',
'bearish/80': 'hsla(var(--bearish-color-hsl), 0.8)',
'bearish/90': 'hsla(var(--bearish-color-hsl), 0.9)',
},
},
},
darkMode: 'class',
plugins: [
heroui({
addCommonColors: true,
defaultTheme: 'light',
defaultExtendTheme: 'light',
layout: {
radius: {
small: '6px', // rounded-small
medium: '10px', // rounded-medium
large: '14px', // rounded-large
},
// fontSize: {
// tiny: '0.75rem', // 12px
// small: '0.875rem', // 14px
// medium: '1rem', // 16px
// large: '1.125rem', // 18px
// DEFAULT: '1rem', // 16px
// },
disabledOpacity: 0.4,
hoverOpacity: 0.7,
},
themes: {
light: {
colors: {
content1: {
DEFAULT: '#FFFFFF',
},
background: {
200: '#E8E8ED',
300: '#F0F0F2',
400: '#F8F8FA',
500: '#FFFFFF',
DEFAULT: '#FFFFFF',
},
foreground: {
100: '#C0C0C9',
300: '#767A80',
500: '#000000',
DEFAULT: '#000000',
},
default: {
DEFAULT: '#E8E8EB',
foreground: '#000000',
},
primary: {
900: '#362349',
700: '#4D2A86',
600: '#6A3AB8',
DEFAULT: '#D745FF', //主色
foreground: '#FFFFFF',
},
secondary: {
DEFAULT: '#E8E8EB',
foreground: '#000000',
},
success: {
DEFAULT: '#2E9F4A',
foreground: '#FFFFFF',
},
danger: {
DEFAULT: '#DE4A40',
foreground: '#FFFFFF',
},
warning: {
DEFAULT: '#FF9821',
foreground: '#FFFFFF',
},
focus: '#D745FF',
divider: '#E0E0E6',
alert: '#E65E16',
gold: '#F38300',
},
},
dark: {
colors: {
content1: {
DEFAULT: '#17171C',
},
background: {
200: '#1F1F23',
300: '#17171C',
400: '#0F0F0F',
500: '#000000',
DEFAULT: '#000000',
},
foreground: {
100: '#4E4E56',
300: '#A1A1AA',
500: '#FFFFFF',
DEFAULT: '#FFFFFF',
},
default: {
DEFAULT: '#1F1F23',
foreground: '#FFFFFF',
},
primary: {
900: '#362349',
700: '#4D2A86',
600: '#6A3AB8',
DEFAULT: '#D745FF', //主色
foreground: '#FFFFFF',
},
secondary: {
DEFAULT: '#1F1F23',
foreground: '#FFFFFF',
},
success: {
DEFAULT: '#45B167',
foreground: '#FFFFFF',
},
danger: {
DEFAULT: '#E84A5A',
foreground: '#FFFFFF',
},
warning: {
DEFAULT: '#FF9821',
foreground: '#FFFFFF',
},
focus: '#D745FF',
divider: '#282828',
alert: '#F57733',
gold: '#FFB800',
},
},
},
function({ addVariant, addComponents }) {
addVariant('child', '& > *');
addVariant('child-hover', '& > *:hover');
// Height-based variants
addVariant('sh', '@media (min-height: 500px)');
addVariant('max-sh', '@media (max-height: 500px)');
addVariant('mh', '@media (min-height: 700px)');
addVariant('max-mh', '@media (max-height: 700px)');
addVariant('lh', '@media (min-height: 900px)');
addVariant('max-lh', '@media (max-height: 900px)');
addVariant('lh950', '@media (min-height: 950px)');
addVariant('max-lh950', '@media (max-height: 950px)');
addVariant('xh', '@media (min-height: 1100px)');
addVariant('max-xh', '@media (max-height: 1100px)');
addVariant('2xh', '@media (min-height: 1300px)');
addVariant('max-2xh', '@media (max-height: 1300px)');
// light mode variant
addVariant('light', '&:not(.dark *)');
// button styles
addComponents({
'.btn-lg': {
fontSize: '1.25rem !important',
lineHeight: '1.25rem !important',
borderRadius: '0.625rem !important',
height: '3.125rem !important', // 50px
fontWeight: '600 !important',
'@media (max-width: 640px)': {
height: '2.75rem !important', // Height for screens < 640px
fontSize: '1rem !important',
lineHeight: '1rem !important',
borderRadius: '500 !important',
},
},
'.btn-md': {
fontSize: '1rem !important',
lineHeight: '1rem !important',
borderRadius: '0.625rem !important',
height: '2.75rem !important', // 44px
fontWeight: '500 !important',
},
'.btn-sm': {
fontSize: '1rem !important',
lineHeight: '1rem !important',
borderRadius: '0.625rem !important',
height: '2.25rem !important', // 36px
fontWeight: '500 !important',
},
});
},
}),
plugin(function ({ addUtilities }) {
addUtilities({
'.no-scrollbar': {
/* Firefox */
'scrollbar-width': 'none',
/* IE/Edge */
'-ms-overflow-style': 'none',
/* Chrome/Safari */
'&::-webkit-scrollbar': {
display: 'none',
},
},
// shadow styles
'.shadow-box': {
boxShadow: '0px 2px 12px 0px rgba(23, 23, 28, 0.15)',
},
'.dark .shadow-box': {
boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.5)',
},
});
}),
],
};