Last Mile: Tracking Page 2.0 Theme
Table of Contents:
- Admin Defined Theme Specifications
- Colors
- Shadows
- Radius
- Fonts
- Typography
- Miscellaneous
- Programmatically Defined Theme Specifications
- Default (Deerreed) Tracking Page Theme
In order for us to match the look and feel of our account brands, we are utilizing a “themes” interface. These themes will provide styling information that can be utilized by tracking page. This will make our tracking page seamlessly cohesive with our customer’s brand. In order for us to be able to drop in any account brand theme, we have come up with theme specifications. Certain specifications are users/admins can configure, while others are programmatically configured based off the theme.
Admin Defined Theme Specifications
When a tracking page is created it will default to our default theme (the Deerreed theme). Admins will have the ability to update specific configurable values. If an admin does not update a configurable value, the default value from the default theme will be utilized. These configurations are stored in Contentful under three Content models: Tracking Page Theme Colors, Radii and Variants, Tracking Page Theme Fonts, Tracking Page Theme Typography. Here are the configurable values broken out into sections.
Colors
|
Body 1 Text Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
NOTE: All typography styling will be included like font family, font size, font weight, letter spacing and line height. |
|
Body 2 Text Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
NOTE: All typography styling will be included like font family, font size, font weight, letter spacing and line height. |
|
Border Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
|
Button Background Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
N/A |
|
Card Background Color |
Not on theme object. Access via |
|
Tracking Page Theme Colors, Radii and Variants |
N/A |
|
Disabled Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
|
Error Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
|
Footer Background Color |
Not on theme object. Access via |
|
Tracking Page Theme Colors, Radii and Variants |
N/A |
|
H1 Text Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
NOTE: All typography styling will be included like font family, font size, font weight, letter spacing and line height. |
|
H2 Text Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
NOTE: All typography styling will be included like font family, font size, font weight, letter spacing and line height. |
|
H3 Text Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
NOTE: All typography styling will be included like font family, font size, font weight, letter spacing and line height. |
|
H4 Text Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
NOTE: All typography styling will be included like font family, font size, font weight, letter spacing and line height. |
|
Info Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
|
Link Text Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
NOTE: All typography styling will be included like font family, font size, font weight, letter spacing and line height. |
|
Link Text Hover Color |
Not on theme object. Access via |
|
Tracking Page Theme Colors, Radii and Variants |
N/A |
|
Primary Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
|
Site Primary Background Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
|
Site Secondary Background Color |
Not on theme object. Access via |
|
Tracking Page Theme Colors, Radii and Variants |
N/A |
|
Warning Color |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
Shadows
|
Button Box Shadow |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
Card Shadow |
|
|
Tracking Page Theme Colors, Radii and Variants |
Radius
|
Button Radius |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
Card Radius |
|
|
Tracking Page Theme Colors, Radii and Variants |
|
Input Radius |
|
|
Tracking Page Theme Colors, Radii and Variants |
Fonts
Admins are limited to 4 custom fonts. Contentful will provide 3 fields for each font, for example: Font 1 Name, Font 1 Backup, Font 1 Link. Font name and font backup will be combined on the theme object for easier consumption when styling.
|
Font (1-4) Name Font (1-4) Backup |
Not on theme object. Access via |
|
Tracking Page Theme Fonts |
|
Font Link |
Not on theme object. Access via |
Tracking Page Theme Fonts |
Typography
Each typography type has 5 Contentful fields: Font Family, Font Size, Font Weight, Letter Spacing, and Line Height. PLEASE NOTE: Color is also included on the typography object.
|
H1 Font Family H1 Font Size H1 Font Weight etc… |
|
1{2 color:'rgba(0, 0, 0, 0.87)',3 fontFamily:'proxima-nova, sans-serif'4 fontSize:'34px',5 fontWeight:'700px',6 letterSpacing:'0.25px',7 lineHeight:'40px',8}
|
Tracking Page Theme Typography |
|
|
H2 |
|
1{2 color:'rgba(0, 0, 0, 0.87)',3 fontFamily:'proxima-nova, sans-serif'4 fontSize:'60px',5 fontWeight:'normal',6 letterSpacing:'-0.1px',7 lineHeight:'1.2px',8} |
Tracking Page Theme Typography |
|
|
H3 |
|
1{2 color:'rgba(0, 0, 0, 0.87)',3 fontFamily:'proxima-nova, sans-serif'4 fontSize:'48px',5 fontWeight:'normal',6 letterSpacing:'normal',7 lineHeight:'1.17px',8} |
Tracking Page Theme Typography |
|
|
H4 |
|
1{2 color:'rgba(0, 0, 0, 0.87)',3 fontFamily:'proxima-nova, sans-serif'4 fontSize:'34px',5 fontWeight:'600px',6 letterSpacing:'0.25px',7 lineHeight:'1.18px',8} |
Tracking Page Theme Typography |
|
|
Body 1 |
|
1{2 fontFamily:'proxima-nova, sans-serif'3 fontSize:'16px',4 fontWeight:'normal',5 letterSpacing:'normal',6 lineHeight:'1.5px',7} |
Tracking Page Theme Typography |
|
|
Body 2 |
|
1{2 color:'rgba(0, 0, 0, 0.87)',3 fontFamily:'proxima-nova, sans-serif'4 fontSize:'14px',5 fontWeight:'normal',6 letterSpacing:'normal',7 lineHeight:'1.48px',8} |
Tracking Page Theme Typography |
|
|
Button |
|
1{2 color:'rgba(0, 0, 0, 0.87)',3 fontFamily:'proxima-nova, sans-serif'4 fontSize:'14px',5 fontWeight:'600px',6 letterSpacing:'0.5px',7 lineHeight:'1px',8} |
Tracking Page Theme Typography |
|
|
Link |
|
1{2 color:'rgba(0, 0, 0, 0.87)',3 fontFamily:'proxima-nova, sans-serif'4 fontSize:'14px',5 fontWeight:'400px',6 letterSpacing:'normal',7 lineHeight:'1.42px',8} |
Tracking Page Theme Typography |
|
Miscellaneous
|
Site Title |
Not on theme object. Access via |
Deerreed Order Tracking |
Tracking Page Theme Colors, Radii and Variants |
|
Favicon |
Not on theme object. Access via |
.ico file |
Tracking Page Theme Colors, Radii and Variants |
Programmatically Defined Theme Specifications
The majority of the remaining theme specifications are programmatically determined. Many of our components have variants, which are defined within our theme object. In order for those variants to be consistent with rest of our theme, theme keys are be mapped to our admin defined theme specifications.
For example:
1buttons:{2default:{3 backgroundColor:'primary',4 borderColor:'transparent',5 borderRadius:'button',6 borderStyle:'solid',7 borderWidth:'medium',8 boxShadow:'button',9 color: theme.utils.colors.contrast(primary),10},11 outlined:{12 backgroundColor:'transparent',13 borderColor:'primary',14 borderRadius:'button',15 borderStyle:'solid',16 borderWidth:'medium',17 boxShadow:'button',18 color:'primary',19},20}
The button component has 2 variants defined, default and outlined. Both variants have css properties that point to primary which maps to theme.colors.primary. This keeps the Button component looking consistent, regardless if the primary color changes. The same is also true with borderRadius on both variants. Both variants pass the string button which maps to theme.radii.button.
PLEASE NOTE: If you are adding a component’s variant styling to the theme, make sure you are not hard coding values and mapping to the correct admin defined theme specifications.
Default (Deerreed) Tracking Page Theme
Please note, this most likely is an out of date design but still provides an example of of how our theme specifications relate to styling on the page.