Ab-nextjs-theme NPM

`ab-nextjs-theme`

IMPORTANT: This is a work in progress and subject to major changes until version 1.0.

🎨 This is a lightweight collection of client React components as theme abElements created by Abraham Ukachi, and optimized for Next.js applications 😎.

Getting Started

Installation

npm

npm i ab-nextjs-theme

pnpm

pnpm install ab-nextjs-theme

Tailwind

A list of all the supported tailwind theme and their current status:

No.	Name	File	Status
1	`Colors`	colors.ts	Done
2	`Typography`	typography.ts	Done
3	`Styles`	styles.ts	~Pending~

NOTE:

CSS

A list of all the supported css theme and their current status:

No.	Name	File	Status
1	`Colors`	css/colors.css	Done*
2	`Typography`	css/typography.css	Done*
3	`Styles`	css/styles.css	Done*

NOTE:

Usage

Import the main styles.css (from root folder) in your globals.css

@import 'ab-nextjs-theme/styles.css';

NOTE:

Color scheme

Key colors

Name	Color (HEX)	Codename
Primary Color	#A67C52	Melanin
Secondary Color	#FFD700	Gold
Tertiary Color	#21FFFF	Cyan
Neutral Color	#211A16	Mud

NOTE: These key colors - also refered to as seeds - were used in the Material Theme Builder to generate AbTheme's M3 Baseline color scheme. However, the codenames are specific to this App :)

Accessibility colors

Name	Color (HEX)
P-Light	#D9AB7F
P-Dark	#755028
S-Light	#FFFF52
S-Dark	#C7A600
Text On Primary	#2D1600
Text On Secondary	#000000

NOTE: These accessibility (a11y) colors were generated using Google's Color Tool with AbTheme's Primary & Secondary colors. P-Light and S-Light are short for Primary Light and Secondary Light color respectively.

Theme

The Ab Theme consists of three parts, namely Classic, Light and Dark Theme.

Name	Classic ⭐️	Light ☀️	Dark 🌑	Role
`primary`	#FCFCFC	#855318	#FCB975	Primary
`surfaceTint`	-	855318	#FCB975	Surface Tint
`onPrimary`	#201A17	#FFFFFF	#4A2800	On Primary
`primaryContainer`	#FFDCBA	#FFDCBD	#693C00	Primary Container
`onPrimaryContainer`	#2D1600	#2C1600	#FFDCBD	On Primary Container
`secondary`	#EAC400	#6F5D0E	#DDC66E	Secondary
`onSecondary`	#3A3000	#FFFFFF	#3A3000	On Secondary
`secondaryContainer`	#FFE15E	#FAE287	#544600	Secondary Container
`onSecondaryContainer`	#231B00	#221B00	#FAE287	On Secondary Container
`tertiary`	#006A6B	#006A6A	#80D5D4	Tertiary
`onTertiary`	#FFFFFF	#FFFFFF	#003737	On Tertiary
`tertiaryContainer`	#004F50	#9CF1F0	#004F50	Tertiary Container
`onTertiaryContainer`	#14FBFB	#002020	#9CF1F0	On Tertiary Container
`error`	#680003	#BA1A1A	#FFB4AB	Error
`onError`	#FF897A	#FFFFFF	#690005	On Error
`errorContainer`	#BA1B1B	#FFDAD6	#93000A	Error Container
`onErrorContainer`	#FFDAD4	#410002	#FFDAD6	On Error Container
`background`	#A67C52	#FFF8F5	#19120C	Background
`onBackground`	#2D1600	#211A14	#EFE0D5	On Background
`surface`	#A67C52	#FFF8F5	#19120D	Surface
`onSurface`	#2D1600	#221A15	#F0DFD7	On Surface
`surfaceVariant`	#755028	#F2DFD1	#51453A	Surface Variant
`onSurfaceVariant`	#D9AB7F	#51453A	#D5C3B5	On Surface Variant
`outline`	#392E24	#837468	#9D8E81	Outline
`outlineVariant`	-	D5C3B5	#51453A	Outline Variant
`shadow`	-	000000	#000000	Shadow
`scrim`	-	000000	#000000	Scrim
`inverseSurface`	#A67C52	#382E29	#F0DFD7	Inverse Surface
`inverseOnSurface`	#2D1600	#FFEDE5	#382E29	Inverse On Surface
`inversePrimary`	#A67C52	#FCB975	#855318	Inverse Primary
`primaryFixed`	-	#FFDCBD	#FFDCBD	Primary Fixed
`onPrimaryFixed`	-	#2C1600	#2C1600	On Primary Fixed
`primaryFixedDim`	-	#FCB975	#FCB975	Primary Fixed Dim
`onPrimaryFixedVariant`	-	#693C00	#693C00	On Primary Fixed Variant
`secondaryFixed`	-	#FAE287	#FAE287	Secondary Fixed
`onSecondaryFixed`	-	#221B00	#221B00	On Secondary Fixed
`secondaryFixedDim`	-	#DDC66E	#DDC66E	Secondary Fixed Dim
`onSecondaryFixedVariant`	-	#544600	#544600	On Secondary Fixed Variant
`tertiaryFixed`	-	#9CF1F0	#9CF1F0	Tertiary Fixed
`onTertiaryFixed`	-	#002020	#002020	On Tertiary Fixed
`tertiaryFixedDim`	-	#80D5D4	#80D5D4	Tertiary Fixed Dim
`onTertiaryFixedVariant`	-	#004F50	#004F50	On Tertiary Fixed Variant
`surfaceDim`	-	#E7D7CF	#19120D	Surface Dim
`surfaceBright`	-	#FFF8F5	#413731	Surface Bright
`surfaceContainerLowest`	-	#FFFFFF	#140D08	Surface Container Lowest
`surfaceContainerLow`	-	#FFF1EA	#221A15	Surface Container Low
`surfaceContainer`	-	#FCEBE2	#261E19	Surface Container
`surfaceContainerHigh`	-	#F6E5DC	#312823	Surface Container High
`surfaceContainerHighest`	-	#F0DFD7	#3D332D	Surface Container Highest

NOTE: The Classic Theme ⭐️ was manually created for the AbTheme, This is an addition to the dynamic color requirements from Material Design 3.

Medium Contast

Name	Classic ⭐️	Light ☀️	Dark 🌑	Role
`primary`	-	#633900	#FFBE7C	Primary
`surfaceTint`	-	#855318	#FCB975	Surface Tint
`onPrimary`	-	#FFFFFF	#251200	On Primary
`primaryContainer`	-	#9F692C	#BF8445	Primary Container
`onPrimaryContainer`	-	#FFFFFF	#000000	On Primary Container
`secondary`	-	#504200	#E1CA72	Secondary
`onSecondary`	-	#FFFFFF	#1C1600	On Secondary
`secondaryContainer`	-	#867325	#A4903E	Secondary Container
`onSecondaryContainer`	-	#FFFFFF	#000000	On Secondary Container
`tertiary`	-	#004B4B	#84D9D8	Tertiary
`onTertiary`	-	#FFFFFF	#001A1A	On Tertiary
`tertiaryContainer`	-	#238181	#479E9D	Tertiary Container
`onTertiaryContainer`	-	#FFFFFF	#000000	On Tertiary Container
`error`	-	#8C0009	#FFBAB1	Error
`onError`	-	#FFFFFF	#370001	On Error
`errorContainer`	-	#DA342E	#FF5449	Error Container
`onErrorContainer`	-	#FFFFFF	#000000	On Error Container
`background`	-	#FFF8F5	#19120C	Background
`onBackground`	-	#211A14	#EFE0D5	On Background
`surface`	-	#FFF8F5	#19120D	Surface
`onSurface`	-	#221A15	#FFFAF8	On Surface
`surfaceVariant`	-	#F2DFD1	#51453A	Surface Variant
`onSurfaceVariant`	-	#4C4136	#D9C8B9	On Surface Variant
`outline`	-	#6A5D51	#B0A093	Outline
`outlineVariant`	-	#87786C	#8F8074	Outline Variant
`shadow`	-	#000000	#000000	Shadow
`scrim`	-	#000000	#000000	Scrim
`inverseSurface`	-	#382E29	#F0DFD7	Inverse Surface
`inverseOnSurface`	-	#FFEDE5	#312823	Inverse On Surface
`inversePrimary`	-	#FCB975	#6A3D01	Inverse Primary
`primaryFixed`	-	#9F692C	#FFDCBD	Primary Fixed
`onPrimaryFixed`	-	#FFFFFF	#1E0D00	On Primary Fixed
`primaryFixedDim`	-	#825115	#FCB975	Primary Fixed Dim
`onPrimaryFixedVariant`	-	#FFFFFF	#522E00	On Primary Fixed Variant
`secondaryFixed`	-	#867325	#FAE287	Secondary Fixed
`onSecondaryFixed`	-	#FFFFFF	#161100	On Secondary Fixed
`secondaryFixedDim`	-	#6C5B0B	#DDC66E	Secondary Fixed Dim
`onSecondaryFixedVariant`	-	#FFFFFF	#413500	On Secondary Fixed Variant
`tertiaryFixed`	-	#238181	#9CF1F0	Tertiary Fixed
`onTertiaryFixed`	-	#FFFFFF	#001414	On Tertiary Fixed
`tertiaryFixedDim`	-	#006767	#80D5D4	Tertiary Fixed Dim
`onTertiaryFixedVariant`	-	#FFFFFF	#003D3D	On Tertiary Fixed Variant
`surfaceDim`	-	#E7D7CF	#19120D	Surface Dim
`surfaceBright`	-	#FFF8F5	#413731	Surface Bright
`surfaceContainerLowest`	-	#FFFFFF	#140D08	Surface Container Lowest
`surfaceContainerLow`	-	#FFF1EA	#221A15	Surface Container Low
`surfaceContainer`	-	#FCEBE2	#261E19	Surface Container
`surfaceContainerHigh`	-	#F6E5DC	#312823	Surface Container High
`surfaceContainerHighest`	-	#F0DFD7	#3D332D	Surface Container Highest

NOTE:

High Contrast

Name	Classic ⭐️	Light ☀️	Dark 🌑	Role
`primary`	-	#361C00	#FFFAF8	Primary
`surfaceTint`	-	#855318	#FCB975	Surface Tint
`onPrimary`	-	#FFFFFF	#000000	On Primary
`primaryContainer`	-	#633900	#FFBE7C	Primary Container
`onPrimaryContainer`	-	#FFFFFF	#000000	On Primary Container
`secondary`	-	#2A2200	#FFFAF5	Secondary
`onSecondary`	-	#FFFFFF	#000000	On Secondary
`secondaryContainer`	-	#504200	#E1CA72	Secondary Container
`onSecondaryContainer`	-	#FFFFFF	#000000	On Secondary Container
`tertiary`	-	#002727	#EAFFFE	Tertiary
`onTertiary`	-	#FFFFFF	#000000	On Tertiary
`tertiaryContainer`	-	#004B4B	#84D9D8	Tertiary Container
`onTertiaryContainer`	-	#FFFFFF	#000000	On Tertiary Container
`error`	-	#4E0002	#FFF9F9	Error
`onError`	-	#FFFFFF	#000000	On Error
`errorContainer`	-	#8C0009	#FFBAB1	Error Container
`onErrorContainer`	-	#FFFFFF	#000000	On Error Container
`background`	-	#FFF8F5	#19120C	Background
`onBackground`	-	#211A14	#EFE0D5	On Background
`surface`	-	#FFF8F5	#19120D	Surface
`onSurface`	-	#000000	#FFFFFF	On Surface
`surfaceVariant`	-	#F2DFD1	#51453A	Surface Variant
`onSurfaceVariant`	-	#2C2219	#FFFAF8	On Surface Variant
`outline`	-	#4C4136	#D9C8B9	Outline
`outlineVariant`	-	#4C4136	#D9C8B9	Outline Variant
`shadow`	-	#000000	#000000	Shadow
`scrim`	-	#000000	#000000	Scrim
`inverseSurface`	-	#382E29	#F0DFD7	Inverse Surface
`inverseOnSurface`	-	#FFFFFF	#000000	Inverse On Surface
`inversePrimary`	-	#FFE8D5	#412300	Inverse Primary
`primaryFixed`	-	#633900	#FFE2C8	Primary Fixed
`onPrimaryFixed`	-	#FFFFFF	#000000	On Primary Fixed
`primaryFixedDim`	-	#442500	#FFBE7C	Primary Fixed Dim
`onPrimaryFixedVariant`	-	#FFFFFF	#251200	On Primary Fixed Variant
`secondaryFixed`	-	#504200	#FFE68B	Secondary Fixed
`onSecondaryFixed`	-	#FFFFFF	#000000	On Secondary Fixed
`secondaryFixedDim`	-	#362C00	#E1CA72	Secondary Fixed Dim
`onSecondaryFixedVariant`	-	#FFFFFF	#1C1600	On Secondary Fixed Variant
`tertiaryFixed`	-	#004B4B	#A0F5F5	Tertiary Fixed
`onTertiaryFixed`	-	#FFFFFF	#000000	On Tertiary Fixed
`tertiaryFixedDim`	-	#003333	#84D9D8	Tertiary Fixed Dim
`onTertiaryFixedVariant`	-	#FFFFFF	#001A1A	On Tertiary Fixed Variant
`surfaceDim`	-	#E7D7CF	#19120D	Surface Dim
`surfaceBright`	-	#FFF8F5	#413731	Surface Bright
`surfaceContainerLowest`	-	#FFFFFF	#140D08	Surface Container Lowest
`surfaceContainerLow`	-	#FFF1EA	#221A15	Surface Container Low
`surfaceContainer`	-	#FCEBE2	#261E19	Surface Container
`surfaceContainerHigh`	-	#F6E5DC	#312823	Surface Container High
`surfaceContainerHighest`	-	#F0DFD7	#3D332D	Surface Container Highest

NOTE:

Custom

NOTE: Custom theme colors for AbTheme will be displayed or added here.

Tonal palettes

A tonal palette consists of thirteen tones, including white and black. A tone value of 100 is equivalent to the idea of light at its maximum and results in white. Every tone value between 0 and 100 expresses the amount of light present in the color.

Tone	Primary	Secondary	Tertiary	Error	Neutral	Neutral Variant
0	#000000	#000000	#000000	#000000	#000000	#000000
5	#1D0D00	#161000	#001414	#000000	#121110	#15100C
10	#2C1600	#221B00	#002020	#410001	#1C1B1B	#201B16
15	#3B1F00	#2E2500	#002B2B	#410001	#272525	#2A2520
20	#472A06	#3A3000	#003737	#680003	#313030	#352F2A
25	#543411	#473A00	#004343	#680003	#3D3B3A	#413A35
30	#61401B	#544600	#004F50	#930006	#484646	#4C4540
35	#6E4B25	#625100	#005C5C	#930006	#545251	#58514B
40	#7C5730	#705D00	#006A6A	#ba1b1b	#605E5D	#655D57
50	#976F46	#8C7500	#008585	#dd3730	#797676	#7E766F
60	#B4885D	#AA8F00	#00A1A1	#ff5449	#93908F	#988F88
70	#D1A275	#C9A900	#00BEBE	#ff897a	#AEAAA9	#B3A9A2
80	#EEBD8E	#E9C400	#00DDDD	#ffb4a9	#CAC6C4	#CFC5BD
90	#FFDCBD	#FCE17B	#8FF3F2	#ffdad4	#E6E1E0	#ECE0D9
95	#FFEEE0	#FFF0C2	#ADFFFE	#ffede9	#F4F0EE	#FAEFE7
98	#FFF8F5	#FFF9EF	#E2FFFE	#FFEDE9	#FDF8F7	#FFF8F5
99	#FFFBFF	#FFFBFF	#F1FFFE	#FCFCFC	#FFFBFF	#FFFBFF
100	#FFFFFF	#FFFFFF	#FFFFFF	#ffffff	#FFFFFF	#FFFFFF

NOTE: These tonal palettes were generated by Material Theme Builder.

Typography

Roboto

Name	Type	Size	Character	Line
`H1`	Light	96	-1.5	112
`H2`	Light	60	-0.5	71
`H3`	Regular	48	auto	57
`H4`	Regular	34	0.25	40
`H5`	Regular	24	auto	28
`H6`	Medium	20	0.25	24
`Body 1`	Regular	16	0.5	28
`Body 2`	Regular	14	0.25	20
`Subtitle 1`	Regular	16	0.15	24
`Subtitle 2`	Medium	14	0.1	24
`Button`	Medium	14	1.25	16
`Caption`	Regular	12	0.4	16
`Overline`	Medium	12	2	16

NOTE: Character = Letter Spacing & Line = Height

Shape

The supported shapes are Circle ⚪️, Square ◻️ and Squircle ⏺ .

Shadow

Elevation	Y	Blur	Spread
`01dp-1`	1	1	0
`01dp-2`	2	1	-1
`01dp-3`	1	3	0
`02dp-1`	2	2	0
`02dp-2`	3	1	-2
`02dp-3`	1	5	0
`03dp-1`	3	4	0
`03dp-2`	3	3	-2
`03dp-3`	1	8	0
`04dp-1`	4	5	0
`04dp-2`	1	10	0
`04dp-3`	2	4	-1
`06dp-1`	6	10	0
`06dp-2`	1	18	0
`06dp-3`	3	5	-1
`08dp-1`	8	10	1
`08dp-2`	3	14	2
`08dp-3`	5	5	-3
`09dp-1`	9	12	1
`09dp-2`	3	16	2
`09dp-3`	5	6	-3
`12dp-1`	12	17	2
`12dp-2`	5	22	4
`12dp-3`	7	8	-4
`16dp-1`	16	24	2
`16dp-2`	6	30	5
`16dp-3`	8	10	-5
`24dp-1`	24	38	3
`24dp-2`	9	46	8
`24dp-3`	11	15	-7