kmc-design-system
v1.2.4
Published
<div align="center"> <img src="https://badgen.net/npm/v/kmc-design-system" alt="NPM Version" /> <img src="https://img.shields.io/bundlephobia/min/kmc-design-system" alt="minzipped size"/> <img src="https://github.com/kmcwebdev/kmc-design-system/actions/wo
Downloads
13
Readme
Features
- Button
- Split Button
- Dialog
- Alert Dialog
- Toast
- Switch
- Toggle
- Radio
- Select
- Input
Installation
- Install
kmc-design-systemas a dependency running the following command:
yarn add kmc-design-system- Install
tailwindcss,postcss,autoprefixerand initializetailwind.config.cjs
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p- Configure the template paths inside the tailwind.config.cjs file and paste this
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', 'node_modules/kmc-design-system/**/*.{js,jsx,ts,tsx}'],
theme: {
fontFamily: {
barlow: ['Barlow Condensed'],
karla: ['Karla'],
},
extend: {
fontSize: {
xl: ['20px', '26px'],
lg: ['18px', , '24px'],
base: ['16px', , '22px'],
sm: ['14px', , '20px'],
xs: ['12px', , '18px'],
tiny: ['10px', , '16px'],
},
boxShadow: {
'sm-1': '0px 0px 2px rgba(14, 31, 53, 0.12)',
'sm-2': '0px 2px 4px rgba(14, 31, 53, 0.12)',
'sm-3': '0px 3px 7px rgba(14, 31, 53, 0.12)',
'sm-4': '0px 4px 8px rgba(14, 31, 53, 0.16)',
'md-1':
'0px 2px 4px rgba(14, 31, 53, 0.06), 0px 6px 12px rgba(14, 31, 53, 0.08), 0px 12px 20px rgba(14, 31, 53, 0.06)',
'md-2':
'0px 3px 6px rgba(14, 31, 53, 0.08), 0px 6px 12px rgba(14, 31, 53, 0.12), 0px 14px 24px rgba(14, 31, 53, 0.08)',
'md-3':
'0px 4px 8px rgba(14, 31, 53, 0.1), 0px 8px 16px rgba(14, 31, 53, 0.16), 0px 16px 28px -1px rgba(14, 31, 53, 0.1)',
'md-4':
'0px 6px 10px rgba(14, 31, 53, 0.12), 0px 12px 18px rgba(14, 31, 53, 0.2), 0px 20px 40px -1px rgba(14, 31, 53, 0.12)',
'lg-1':
'0px 5px 10px rgba(14, 31, 53, 0.06), 0px 10px 20px rgba(14, 31, 53, 0.12), 0px 16px 24px -1px rgba(14, 31, 53, 0.12), 0px 20px 38px -2px rgba(14, 31, 53, 0.06)',
'lg-2':
'0px 5px 10px rgba(14, 31, 53, 0.08), 0px 10px 20px rgba(14, 31, 53, 0.16), 0px 24px 32px -1px rgba(14, 31, 53, 0.16), 0px 32px 64px -2px rgba(14, 31, 53, 0.08)',
'lg-3':
'0px 5px 10px -1px rgba(14, 31, 53, 0.06), 0px 10px 20px -2px rgba(14, 31, 53, 0.1), 0px 16px 32px -3px rgba(14, 31, 53, 0.12), 0px 32px 64px -4px rgba(14, 31, 53, 0.14), 0px 40px 72px -5px rgba(14, 31, 53, 0.24)',
'lg-4':
'0px 5px 10px -1px rgba(14, 31, 53, 0.06), 0px 10px 20px -2px rgba(14, 31, 53, 0.1), 0px 16px 32px -3px rgba(14, 31, 53, 0.12), 0px 32px 64px -4px rgba(14, 31, 53, 0.14), 0px 56px 84px -5px rgba(14, 31, 53, 0.32)',
},
colors: {
'branding-navy': '#001738',
'branding-white': '#FFFFFF',
'branding-pumpkin': '#FF7200',
'branding-black': '#000000',
'branding-rich-black': '#111622',
'branding-light-blue': '#CEDDEF',
'main-heading': '#2C2C2C',
'main-text': '#4B4B4B',
'main-body': '#6E6E6E',
'main-disabled': '#B3B3B3',
'main-success': '#008060',
'main-warning': '#916A00',
'main-danger': '#D72C0D',
'main-info': '#2C6ECB',
'main-accent': '#FF7200',
'main-white': '#FFFFFF',
'surface-primary-neutral': '#FFF4EB',
'surface-primary-hovered': '#FFE9D8',
'surface-primary-pressed': '#FFDEC4',
'surface-success-neutral': '#F1F8F5',
'surface-success-hovered': '#ECF6F1',
'surface-success-pressed': '#E2F1EA',
'surface-warning-neutral': '#FFF5EA',
'surface-warning-hovered': '#FFF2E2',
'surface-warning-pressed': '#FFEBD3',
'surface-danger-neutral': '#FFF4F4',
'surface-danger-hovered': '#FFF0F0',
'surface-danger-pressed': '#FFE9E8',
'surface-info-neutral': '#F2F7FE',
'surface-info-hovered': '#EDF4FE',
'surface-info-pressed': '#E5EFFD',
'interactive-primary-neutral': '#FF7200',
'interactive-primary-hovered': '#FF8827',
'interactive-primary-pressed': '#EB6900',
'interactive-secondary-neutral': '#FFFFFF',
'interactive-secondary-hovered': '#F6F6F7',
'interactive-secondary-pressed': '#F1F2F3',
'interactive-success-neutral': '#008060',
'interactive-success-hovered': '#006E52',
'interactive-success-pressed': '#005E46',
'interactive-warning-neutral': '#E68619',
'interactive-warning-hovered': '#DA7B11',
'interactive-warning-pressed': '#BD640D',
'interactive-danger-neutral': '#D82C0D',
'interactive-danger-hovered': '#BC2200',
'interactive-danger-pressed': '#A21B00',
'interactive-info-neutral': '#2C6ECB',
'interactive-info-hovered': '#1F5199',
'interactive-info-pressed': '#103262',
'interactive-disabled': '#F6F6F7',
gray: {
0: '#FFFFFF',
50: '#FAFAFA',
100: '#F5F5F5',
200: '#EAEAEA',
300: '#E1E1E1',
400: '#CACACA',
500: '#B3B3B3',
600: '#8E8E8E',
700: '#6E6E6E',
800: '#4B4B4B',
900: '#2C2C2C',
},
},
},
},
plugins: [require('@tailwindcss/forms')],
};- Set up the Tailwind directives inside the ./src/index.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
font-family: 'Karla';
}
h1 {
@apply leading-[32px] text-[26px] lg:text-[32px] lg:leading-[38px];
}
h2 {
@apply leading-[30px] text-[24px] lg:text-[28px] lg:leading-[38px];
}
h3 {
@apply leading-[26px] text-[22px] lg:text-[24px] lg:leading-[38px];
}
h4 {
@apply text-[20px] leading-[38px];
}
}