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 😎.
npm i ab-nextjs-theme pnpm install ab-nextjs-theme 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 |
NOTE:
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:
Import the main styles.css (from root folder) in your globals.css
@import 'ab-nextjs-theme/styles.css';NOTE:
| 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 :)
| 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-LightandS-Lightare short for Primary Light and Secondary Light color respectively.
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.
| 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:
| 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:
NOTE: Custom theme colors for
AbThemewill be displayed or added here.
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.
| Name | Type | Size | Character | Line | Paragraph |
|---|---|---|---|---|---|
H1 |
Light | 96 | -1.5 | 112 | 0 |
H2 |
Light | 60 | -0.5 | 71 | 0 |
H3 |
Regular | 48 | auto | 57 | 0 |
H4 |
Regular | 34 | 0.25 | 40 | 0 |
H5 |
Regular | 24 | auto | 28 | 0 |
H6 |
Medium | 20 | 0.25 | 24 | 0 |
Body 1 |
Regular | 16 | 0.5 | 28 | 0 |
Body 2 |
Regular | 14 | 0.25 | 20 | 0 |
Subtitle 1 |
Regular | 16 | 0.15 | 24 | 0 |
Subtitle 2 |
Medium | 14 | 0.1 | 24 | 0 |
Button |
Medium | 14 | 1.25 | 16 | 0 |
Caption |
Regular | 12 | 0.4 | 16 | 0 |
Overline |
Medium | 12 | 2 | 16 | 0 |
NOTE: Character = Letter Spacing & Line = Height
The supported shapes are Circle ⚪️, Square ◻️ and Squircle ⏺ .
| Elevation | X | Y | Blur | Spread |
|---|---|---|---|---|
01dp-1 |
0 | 1 | 1 | 0 |
01dp-2 |
0 | 2 | 1 | -1 |
01dp-3 |
0 | 1 | 3 | 0 |
02dp-1 |
0 | 2 | 2 | 0 |
02dp-2 |
0 | 3 | 1 | -2 |
02dp-3 |
0 | 1 | 5 | 0 |
03dp-1 |
0 | 3 | 4 | 0 |
03dp-2 |
0 | 3 | 3 | -2 |
03dp-3 |
0 | 1 | 8 | 0 |
04dp-1 |
0 | 4 | 5 | 0 |
04dp-2 |
0 | 1 | 10 | 0 |
04dp-3 |
0 | 2 | 4 | -1 |
06dp-1 |
0 | 6 | 10 | 0 |
06dp-2 |
0 | 1 | 18 | 0 |
06dp-3 |
0 | 3 | 5 | -1 |
08dp-1 |
0 | 8 | 10 | 1 |
08dp-2 |
0 | 3 | 14 | 2 |
08dp-3 |
0 | 5 | 5 | -3 |
09dp-1 |
0 | 9 | 12 | 1 |
09dp-2 |
0 | 3 | 16 | 2 |
09dp-3 |
0 | 5 | 6 | -3 |
12dp-1 |
0 | 12 | 17 | 2 |
12dp-2 |
0 | 5 | 22 | 4 |
12dp-3 |
0 | 7 | 8 | -4 |
16dp-1 |
0 | 16 | 24 | 2 |
16dp-2 |
0 | 6 | 30 | 5 |
16dp-3 |
0 | 8 | 10 | -5 |
24dp-1 |
0 | 24 | 38 | 3 |
24dp-2 |
0 | 9 | 46 | 8 |
24dp-3 |
0 | 11 | 15 | -7 |
NOTE:
To learn more about abElements, take a look at the following resources:
- abElements Documentation - learn about
abElementsfeatures and API. - abElements Animations - learn about animations in
abElements. - abElements Core - learn about core in
abElements. - abElements Theme - learn about theme in
abElements. - abElements Icons - learn about icons in
abElements. - abElements Components - learn about components in
abElements. - abElements Fonts - learn about fonts in
abElements. - abElements Hooks - learn about hooks in
abElements.
You can check out the abElements GitHub repository for more details.
- Update/sync the Theme with the current material-theme.json data.
- Update/sync the Medium Contrast with the current material-theme.json data.
- Update/sync the High Contrast with the current material-theme.json data.
- Complete the Classic theme (including in the material-theme.json data).
This ab-nextjs-theme project is MIT Licensed ;)