dd-islamic-ui-kit
v1.0.8
Published
```js npm i dd-islamic-ui-kit yarn add dd-islamic-ui-kit ```
Downloads
72
Readme
UI Kit для Digieed Islamic
npm i dd-islamic-ui-kit
yarn add dd-islamic-ui-kit
Конфигурация tailwind.config.js
export default /** @type {import('tailwindcss').Config} */
export default {
content: ['./node_modules/dd-islamic-ui-kit/**/*.{js,ts,jsx,tsx}', './lib/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: '#8c5ba1',
primaryDark: '#272F58',
primaryLight: '#6b6bbd',
primaryBlue: '#0E52D5',
primary05: '#f6f6fa',
primary10: '#F3EEF5',
primary15: '#e3e5f0',
primary20: '#dadceb',
primary25: '#d1d4e5',
primary30: '#c8cbe0',
primary35: '#bfc3dc',
primary40: '#b6bad6',
primary45: '#acb1d1',
primary50: '#a3a8cb',
primary55: '#9a9fc7',
primary60: '#9296c2',
primary65: '#888dbc',
primary70: '#7f85b7',
primary75: '#767cb2',
primary80: '#6d74ad',
primary85: '#646ba8',
primary90: '#5a62a3',
primary95: '#525a9e',
secondary: '#E2E8F0',
secondaryLight: '#EDF2F7',
secondaryDark: '#CBD5E0',
secondary05: '#fdfefe',
secondary10: '#fcfdfd',
secondary15: '#fbfcfd',
secondary20: '#f9fafc',
secondary25: '#f8f9fb',
secondary30: '#f6f8fa',
secondary35: '#f5f7fa',
secondary40: '#f3f6f9',
secondary45: '#f2f5f8',
secondary50: '#f0f4f7',
secondary55: '#eff3f7',
secondary60: '#edf1f6',
secondary65: '#ecf0f5',
secondary70: '#eaeff4',
secondary75: '#e9eef3',
secondary80: '#e7edf3',
secondary85: '#e6ecf2',
secondary90: '#e4ebf1',
secondary95: '#e3e9f0',
textPrimary: '#1A202C',
textSecondary: '#718096',
textWhite: '#fff',
textBlack: '#000',
success: '#2e7d32',
successLight: '#4caf50',
successDark: '#1b5e20',
success10: '#e9f2ea',
success20: '#d4e5d7',
success30: '#bed8c2',
success40: '#a9caae',
success50: '#93bd99',
success60: '#7fb086',
success70: '#69a371',
success80: '#55975d',
success90: '#408948',
warning: '#ed6c02',
warningLight: '#ff9800',
warningDark: '#e65100',
warning10: '#fdf0e8',
warning20: '#fae1d2',
warning30: '#f8d2bc',
warning40: '#f7c4a6',
warning50: '#f5b48f',
warning60: '#f3a678',
warning70: '#f19760',
warning80: '#f08948',
warning90: '#ee7a2d',
white20: '#C7C9CE',
error: '#d32f2f',
errorLight: '#ef5350',
errorDark: '#c62828',
error10: '#f9e9eb',
error20: '#f5d3d6',
error30: '#f0bec2',
error40: '#eca9ae',
error50: '#e7949a',
error60: '#e37e85',
error70: '#df6970',
error80: '#db555b',
error90: '#d64146',
info: '#0288d1',
infoLight: '#03a9f4',
infoDark: '#01579b',
info10: '#e6f3fb',
info20: '#cfe7f6',
info30: '#b6dbf2',
info40: '#9fcfed',
info50: '#87c3e8',
info60: '#71b8e4',
info70: '#5cacdf',
info80: '#499fda',
info90: '#3993d6',
body: '#EAEBF2',
input: '#f3eff6',
violet: '#8c5ba1',
grey: '#f5f6fc',
account: '#495198',
white: '#fff',
black: '#000',
divider: '#E2E8F0'
},
borderRadius: {
xs: '4px',
sm: '8px',
md: '12px',
lg: '16px',
xl: '32px',
full: '100%'
},
backgroundImage: {
'auth': "url('/auth_bg.png')"
},
boxShadow: {
buttonPrimary: '0px 0px 0px 3px rgba(73, 81, 152, 0.3)',
buttonSecondary: '0px 0px 0px 3px rgba(226, 232, 240, 0.7)',
buttonWarning: '0px 0px 0px 3px rgba(237, 108, 2, 0.3)',
buttonError: '0px 0px 0px 3px rgba(211, 47, 47, 0.3)',
buttonSuccess: '0px 0px 0px 3px rgba(46, 125, 50, 0.3)',
buttonInfo: '0px 0px 0px 3px rgba(2, 136, 209, 0.3)',
xs: '0px 1px 2px 0px rgba(0, 0, 0, 0.2)',
sm: '0px 2px 3px 0px rgba(0, 0, 0, 0.2)',
md: '0px 4px 8px 3px rgba(0, 0, 0, 0.1)',
lg: '0px 6px 10px 4px rgba(0, 0, 0, 0.1)',
exLg: '0px 8px 12px 6px rgba(0, 0, 0, 0.1)'
},
borderColor: {
DEFAULT: '#E2E8F0'
},
textColor: {
DEFAULT: '#1A202C'
},
transition: {
'all-30': 'transition 0.3s ease-in'
},
padding: {
navbar: '200px',
header: '105px'
},
width: {
navbar: '200px',
header: 'calc(100vw - 200px)'
},
height: {
'button-xs': '24px',
'button-sm': '32px',
'button-md': '40px',
'button-lg': '48px',
'button-xl': '56px',
header: '105px',
main: 'calc(100vh - 105px)'
},
maxHeight: {
modal: 'calc(100vh - 64px)'
}
}
},
plugins: []
}