@reown/appkit-ui
Version:
The full stack toolkit to build onchain app UX.
259 lines • 9.25 kB
JavaScript
export const colors = {
black: '#202020',
white: '#FFFFFF',
white010: 'rgba(255, 255, 255, 0.1)',
accent010: 'rgba(9, 136, 240, 0.1)',
accent020: 'rgba(9, 136, 240, 0.2)',
accent030: 'rgba(9, 136, 240, 0.3)',
accent040: 'rgba(9, 136, 240, 0.4)',
accent050: 'rgba(9, 136, 240, 0.5)',
accent060: 'rgba(9, 136, 240, 0.6)',
accent070: 'rgba(9, 136, 240, 0.7)',
accent080: 'rgba(9, 136, 240, 0.8)',
accent090: 'rgba(9, 136, 240, 0.9)',
accent100: 'rgba(9, 136, 240, 1.0)',
accentSecondary010: 'rgba(199, 185, 148, 0.1)',
accentSecondary020: 'rgba(199, 185, 148, 0.2)',
accentSecondary030: 'rgba(199, 185, 148, 0.3)',
accentSecondary040: 'rgba(199, 185, 148, 0.4)',
accentSecondary050: 'rgba(199, 185, 148, 0.5)',
accentSecondary060: 'rgba(199, 185, 148, 0.6)',
accentSecondary070: 'rgba(199, 185, 148, 0.7)',
accentSecondary080: 'rgba(199, 185, 148, 0.8)',
accentSecondary090: 'rgba(199, 185, 148, 0.9)',
accentSecondary100: 'rgba(199, 185, 148, 1.0)',
productWalletKit: '#FFB800',
productAppKit: '#FF573B',
productCloud: '#0988F0',
productDocumentation: '#008847',
neutrals050: '#F6F6F6',
neutrals100: '#F3F3F3',
neutrals200: '#E9E9E9',
neutrals300: '#D0D0D0',
neutrals400: '#BBB',
neutrals500: '#9A9A9A',
neutrals600: '#6C6C6C',
neutrals700: '#4F4F4F',
neutrals800: '#363636',
neutrals900: '#2A2A2A',
neutrals1000: '#252525',
semanticSuccess010: 'rgba(48, 164, 107, 0.1)',
semanticSuccess020: 'rgba(48, 164, 107, 0.2)',
semanticSuccess030: 'rgba(48, 164, 107, 0.3)',
semanticSuccess040: 'rgba(48, 164, 107, 0.4)',
semanticSuccess050: 'rgba(48, 164, 107, 0.5)',
semanticSuccess060: 'rgba(48, 164, 107, 0.6)',
semanticSuccess070: 'rgba(48, 164, 107, 0.7)',
semanticSuccess080: 'rgba(48, 164, 107, 0.8)',
semanticSuccess090: 'rgba(48, 164, 107, 0.9)',
semanticSuccess100: 'rgba(48, 164, 107, 1.0)',
semanticError010: 'rgba(223, 74, 52, 0.1)',
semanticError020: 'rgba(223, 74, 52, 0.2)',
semanticError030: 'rgba(223, 74, 52, 0.3)',
semanticError040: 'rgba(223, 74, 52, 0.4)',
semanticError050: 'rgba(223, 74, 52, 0.5)',
semanticError060: 'rgba(223, 74, 52, 0.6)',
semanticError070: 'rgba(223, 74, 52, 0.7)',
semanticError080: 'rgba(223, 74, 52, 0.8)',
semanticError090: 'rgba(223, 74, 52, 0.9)',
semanticError100: 'rgba(223, 74, 52, 1.0)',
semanticWarning010: 'rgba(243, 161, 63, 0.1)',
semanticWarning020: 'rgba(243, 161, 63, 0.2)',
semanticWarning030: 'rgba(243, 161, 63, 0.3)',
semanticWarning040: 'rgba(243, 161, 63, 0.4)',
semanticWarning050: 'rgba(243, 161, 63, 0.5)',
semanticWarning060: 'rgba(243, 161, 63, 0.6)',
semanticWarning070: 'rgba(243, 161, 63, 0.7)',
semanticWarning080: 'rgba(243, 161, 63, 0.8)',
semanticWarning090: 'rgba(243, 161, 63, 0.9)',
semanticWarning100: 'rgba(243, 161, 63, 1.0)'
};
export const tokens = {
core: {
backgroundAccentPrimary: '#0988F0',
backgroundAccentCertified: '#C7B994',
backgroundWalletKit: '#FFB800',
backgroundAppKit: '#FF573B',
backgroundCloud: '#0988F0',
backgroundDocumentation: '#008847',
backgroundSuccess: 'rgba(48, 164, 107, 0.20)',
backgroundError: 'rgba(223, 74, 52, 0.20)',
backgroundWarning: 'rgba(243, 161, 63, 0.20)',
textAccentPrimary: '#0988F0',
textAccentCertified: '#C7B994',
textWalletKit: '#FFB800',
textAppKit: '#FF573B',
textCloud: '#0988F0',
textDocumentation: '#008847',
textSuccess: '#30A46B',
textError: '#DF4A34',
textWarning: '#F3A13F',
borderAccentPrimary: '#0988F0',
borderSecondary: '#C7B994',
borderSuccess: '#30A46B',
borderError: '#DF4A34',
borderWarning: '#F3A13F',
foregroundAccent010: 'rgba(9, 136, 240, 0.1)',
foregroundAccent020: 'rgba(9, 136, 240, 0.2)',
foregroundAccent040: 'rgba(9, 136, 240, 0.4)',
foregroundAccent060: 'rgba(9, 136, 240, 0.6)',
foregroundSecondary020: 'rgba(199, 185, 148, 0.2)',
foregroundSecondary040: 'rgba(199, 185, 148, 0.4)',
foregroundSecondary060: 'rgba(199, 185, 148, 0.6)',
iconAccentPrimary: '#0988F0',
iconAccentCertified: '#C7B994',
iconSuccess: '#30A46B',
iconError: '#DF4A34',
iconWarning: '#F3A13F',
glass010: 'rgba(255, 255, 255, 0.1)',
zIndex: '9999'
},
dark: {
overlay: 'rgba(0, 0, 0, 0.50)',
backgroundPrimary: '#202020',
backgroundInvert: '#FFFFFF',
textPrimary: '#FFFFFF',
textSecondary: '#9A9A9A',
textTertiary: '#BBBBBB',
textInvert: '#202020',
borderPrimary: '#2A2A2A',
borderPrimaryDark: '#363636',
borderSecondary: '#4F4F4F',
foregroundPrimary: '#252525',
foregroundSecondary: '#2A2A2A',
foregroundTertiary: '#363636',
iconDefault: '#9A9A9A',
iconInverse: '#FFFFFF'
},
light: {
overlay: 'rgba(230 , 230, 230, 0.5)',
backgroundPrimary: '#FFFFFF',
borderPrimaryDark: '#E9E9E9',
backgroundInvert: '#202020',
textPrimary: '#202020',
textSecondary: '#9A9A9A',
textTertiary: '#6C6C6C',
textInvert: '#FFFFFF',
borderPrimary: '#E9E9E9',
borderSecondary: '#D0D0D0',
foregroundPrimary: '#F3F3F3',
foregroundSecondary: '#E9E9E9',
foregroundTertiary: '#D0D0D0',
iconDefault: '#9A9A9A',
iconInverse: '#202020'
}
};
export const borderRadius = {
'1': '4px',
'2': '8px',
'10': '10px',
'3': '12px',
'4': '16px',
'6': '24px',
'5': '20px',
'8': '32px',
'16': '64px',
'20': '80px',
'32': '128px',
'64': '256px',
'128': '512px',
round: '9999px'
};
export const spacing = {
'0': '0px',
'01': '2px',
'1': '4px',
'2': '8px',
'3': '12px',
'4': '16px',
'5': '20px',
'6': '24px',
'7': '28px',
'8': '32px',
'9': '36px',
'10': '40px',
'12': '48px',
'14': '56px',
'16': '64px',
'20': '80px',
'32': '128px',
'64': '256px'
};
const fontFamily = {
regular: 'KHTeka',
mono: 'KHTekaMono'
};
const fontWeight = {
regular: '400',
medium: '500'
};
const textSize = {
h1: '50px',
h2: '44px',
h3: '38px',
h4: '32px',
h5: '26px',
h6: '20px',
large: '16px',
medium: '14px',
small: '12px'
};
const typography = {
'h1-regular-mono': { lineHeight: '50px', letterSpacing: '-3px' },
'h1-regular': { lineHeight: '50px', letterSpacing: '-1px' },
'h1-medium': { lineHeight: '50px', letterSpacing: '-0.84px' },
'h2-regular-mono': { lineHeight: '44px', letterSpacing: '-2.64px' },
'h2-regular': { lineHeight: '44px', letterSpacing: '-0.88px' },
'h2-medium': { lineHeight: '44px', letterSpacing: '-0.88px' },
'h3-regular-mono': { lineHeight: '38px', letterSpacing: '-2.28px' },
'h3-regular': { lineHeight: '38px', letterSpacing: '-0.76px' },
'h3-medium': { lineHeight: '38px', letterSpacing: '-0.76px' },
'h4-regular-mono': { lineHeight: '32px', letterSpacing: '-1.92px' },
'h4-regular': { lineHeight: '32px', letterSpacing: '-0.32px' },
'h4-medium': { lineHeight: '32px', letterSpacing: '-0.32px' },
'h5-regular-mono': { lineHeight: '26px', letterSpacing: '-1.56px' },
'h5-regular': { lineHeight: '26px', letterSpacing: '-0.26px' },
'h5-medium': { lineHeight: '26px', letterSpacing: '-0.26px' },
'h6-regular-mono': { lineHeight: '20px', letterSpacing: '-1.2px' },
'h6-regular': { lineHeight: '20px', letterSpacing: '-0.6px' },
'h6-medium': { lineHeight: '20px', letterSpacing: '-0.6px' },
'lg-regular-mono': { lineHeight: '16px', letterSpacing: '-0.96px' },
'lg-regular': { lineHeight: '18px', letterSpacing: '-0.16px' },
'lg-medium': { lineHeight: '18px', letterSpacing: '-0.16px' },
'md-regular-mono': { lineHeight: '14px', letterSpacing: '-0.84px' },
'md-regular': { lineHeight: '16px', letterSpacing: '-0.14px' },
'md-medium': { lineHeight: '16px', letterSpacing: '-0.14px' },
'sm-regular-mono': { lineHeight: '12px', letterSpacing: '-0.72px' },
'sm-regular': { lineHeight: '14px', letterSpacing: '-0.12px' },
'sm-medium': { lineHeight: '14px', letterSpacing: '-0.12px' }
};
const easings = {
'ease-out-power-2': 'cubic-bezier(0.23, 0.09, 0.08, 1.13)',
'ease-out-power-1': 'cubic-bezier(0.12, 0.04, 0.2, 1.06)',
'ease-in-power-2': 'cubic-bezier(0.92, -0.13, 0.77, 0.91)',
'ease-in-power-1': 'cubic-bezier(0.88, -0.06, 0.8, 0.96)',
'ease-inout-power-2': 'cubic-bezier(0.77, 0.09, 0.23, 1.13)',
'ease-inout-power-1': 'cubic-bezier(0.88, 0.04, 0.12, 1.06)'
};
const durations = {
xl: '400ms',
lg: '200ms',
md: '125ms',
sm: '75ms'
};
export const styles = {
colors,
fontFamily,
fontWeight,
textSize,
typography,
tokens: {
core: tokens.core,
theme: tokens.dark
},
borderRadius,
spacing,
durations,
easings
};
//# sourceMappingURL=ThemeConstantsUtil.js.map