Configuration
An easy to use guide on how to configure and customise the design system.
By default, all necessary configurations and values that ensure a smooth and consistent set of components have been embedded into the ` @AEGov/DesignSystem ` plugin.
You do not need to this to your configuration file. By installing the plugin provided, you will be extending the following configurations into your project.
module.exports = {
theme: {
screens:{
'sm':'640px',
'md':'768px',
'lg':'1024px',
'xl':'1280px',
'2xl':'1536px'
},
container: {
padding: {
DEFAULT: '0.625rem',
md:'0.875rem',
lg:'1.375rem',
xl:'1.25rem'
},
center: true
},
fontFamily: {
'roboto': ['\'Roboto\'','ui-sans-serif','system-ui','-apple-system','BlinkMacSystemFont','\'Segoe UI\'','\'Helvetica Neue\'','sans-serif'],
'inter':['\'Inter\'','\'Helvetica Neue\'','ui-sans-serif','system-ui','sans-serif'],
'notokufi': ['\'Noto Kufi Arabic\'','ui-sans-serif','\'Helvetica Neue\'','sans-serif'],
'alexandria': ['\'Alexandria\'','\'Helvetica Neue\'','ui-sans-serif','system-ui','sans-serif']
},
fontSize: {
'xs':'0.75rem',
'sm':'0.875rem',
'base':'1rem',
'lg':'1.125rem',
'xl':'1.25rem',
'2xl':'1.5rem',
'3xl':'1.875rem',
'h5':'1.375rem',
'h4':'1.75rem',
'h3':'2.375rem',
'h2':'3.125rem',
'h1':'4.25rem',
'display':'5.625rem'
},
colors: {
...aegovColors,
'primary':aegovColors.aegold,
'secondary':aegovColors.aeblack,
'primary-support':aegovColors.camel,
'secondary-support':aegovColors.seablue
},
extend: {
boxShadow: {
'button': `0px 0px 0px 5px`
},
height: {
'4.5': '1.125rem',
'13': '3.25rem'
},
width : {
'4.5': '1.125rem',
'13': '3.25rem'
}
}
},
safelist: [
'aegov-drawer-backdrop',
'aegov-modal-backdrop',
'opacity-100',
'opacity-0',
'aegov-backdrop',
{
pattern: /(?:^|\s)(justify|items)-(start|center|end)(?:\s|$)/,
}
],
}
Creating your configuration file.
By following the documentaion on TailwindCSS.com on how to setup your configuration, you will learn more about how to create your own configuration file. You may also rename your config file to what you need, and further add additional values required.
When starting a new project, always ensure to add the ` @AEGov/DesignSystem ` plugin to the ` tailwindcss.config.js ` file. Without the addition of this plugin, your project will not inherit the components.
module.exports = {
// ...
plugins: [
require('@aegov/design-system')
]
}
To extend the complete use TailwindCSS features, we also require that you add additional required plugins to your project. Hence, your plugin confgirations will be as follows:
module.exports = {
// ...
plugins: [
require('@aegov/design-system'),
require('@tailwindcss/typography'),
require('@tailwindcss/forms')
]
}
The ` @tailwindcss/typography ` plugin provides the ability to control the style of HTML elements generated by a CMS, while the ` @tailwindcss/forms ` plugin is essential to add the necessary functionality to components that may be used in the creation of forms.
Configuring your brand colour
A federal authority may choose to brand the website with colours that are not the primary colours defined - which is AE GOLD and AE BLACK. An authority may select a different primary colour, however, they are advised to use a dark colour scheme for the secondary colour.
Never mix up the swatches of the colours or use a secondary colour in place of a primary colour. All swatches applied to components are created based on the use of specific colour swatch colours.
For example;
- All buttons are designed to use the
`600`as the primary colour and`500`swatch for the hover state. - Footer and header identifier bar uses the primary colour.
- Dropdown navigation items utilise the primary colour for hover state colour of menu items.
... and more. Hence, you must never change the swatches and generate a swatch relevant to how they are created for the defined primary colours.
How to add brand colours?
Once you have set up your project, and created the ` tailwind.config.js ` file, you can add the colours in the object in this file. Here is an example:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors: {
'primary': {
/* Your colour swatch from 50 to 950 */
},
'secondary': {
/* Your colour swatch from 50 to 950 */
},
'primary-support': {
/* your support swatch for primary, from 50 to 600 */
},
'secondary-support': {
/* your support swatch for primary, from 50 to 600 */
}
}
}
},
plugins: [
require('@aegov/design-system'),
require('@tailwindcss/typography'),
require('@tailwindcss/forms')
]
}
You may further config additional values in the config file and extend existing values or add new classes you may want to generated, example - a keyframe animation, a specefic class for an element or extending the container to a larger viewport.
