chore: tailwind nexi colours

This commit is contained in:
Nicholas Ciechanowski 2023-10-05 19:01:26 +11:00
parent 9e303811bf
commit 07365b50a8
2 changed files with 51 additions and 0 deletions

View File

@ -1,3 +1,42 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* TODO: Look into dark secondary, Will probs need to be some kinda grey */
/* TODO: Looks into adding text colours and sub-text colours */
/* Nexi Colours
Black - 24, 24, 24 (#181818) - Pantone 'Neutral Black C'
Red - 235, 49, 46 (#EB312E) - Pantone '1788C'
Grey - 228, 228, 228 (#E4E4E4)
Darker Grey - 210, 210, 210 (#D2D2D2)
Green - 54, 234, 123 (#36EA7B)
Cyan - 54, 233, 234 (#36E9EA)
Purple - 166, 37, 234 (#A625EA)
Orange - 241, 124, 37 (#F17C25)
*/
:root {
--color-nexi-primary: 255 255 255;
--color-nexi-secondary: 24, 24, 24;
--color-nexi-red: 235, 49, 46;
--color-nexi-grey: 228, 228, 228;
--color-nexi-darker-grey: 210, 210, 210;
--color-nexi-green: 54, 234, 123;
--color-nexi-cyan: 247 147 34;
--color-nexi-purple: 166, 37, 234;
--color-nexi-orange: 241, 124, 37;
}
:root[class~="dark"] {
--color-nexi-primary: 24, 24, 24;
--color-nexi-secondary: 255, 255, 255;
--color-nexi-red: 235, 49, 46;
--color-nexi-grey: 228, 228, 228;
--color-nexi-darker-grey: 210, 210, 210;
--color-nexi-green: 54, 234, 123;
--color-nexi-cyan: 247 147 34;
--color-nexi-purple: 166, 37, 234;
--color-nexi-orange: 241, 124, 37;
}
}

View File

@ -11,8 +11,20 @@ export default {
'./resources/**/*.vue',
],
// TODO: We'll wants want to add something like a text colour, sub-text colour
theme: {
extend: {
colors: {
nexiPrimary: "rgb(var(--color-nexi-primary) / <alpha-value>)",
nexiSecondary: "rgb(var(--color-nexi-secondary) / <alpha-value>)",
nexiRed: "rgb(var(--color-nexi-red) / <alpha-value>)",
nexiGrey: "rgb(var(--color-nexi-grey) / <alpha-value>)",
nexiDarkerGrey: "rgb(var(--color-nexi-darker-grey) / <alpha-value>)",
nexiGreen: "rgb(var(--color-nexi-green) / <alpha-value>)",
nexiCyan: "rgb(var(--color-nexi-cyan) / <alpha-value>)",
nexiPurple: "rgb(var(--color-nexi-purple) / <alpha-value>)",
nexiOrange: "rgb(var(--color-nexi-orange) / <alpha-value>)",
},
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},