Use design palette highlight color (#f8eedf) for all page headers #168
+82
−17
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { ComponentProps, forwardRef } from "react"; | ||
|
|
||
| import { cn } from "../utils/styles"; | ||
|
|
||
| /* | ||
| * since some of the header elements currently being used on the site seem | ||
| * somewhat arbitrary, the only consistent styling is just the highlight | ||
| * color. | ||
| * | ||
| * when we want more consistency we can use these to enforce specific | ||
| * styling. | ||
| * | ||
| * the current elements (2026/04/24) are 1:1 replacement for base html | ||
| * elements and only modify the styling and everything else is just passed | ||
| * through without changes. | ||
| */ | ||
|
|
||
| export const H1 = forwardRef<HTMLHeadingElement, ComponentProps<"h1">>(({className, ...props}, ref) => { | ||
| return <h1 | ||
| ref={ref} | ||
| className={cn("text-highlight-500", className)} | ||
| {...props} | ||
| />; | ||
| }); | ||
| H1.displayName = "H1"; | ||
|
Comment on lines
+18
to
+25
Contributor
There was a problem hiding this comment. Nice abstraction overall. One thing to maybe tweak: these heading wrappers pass children through Could we destructure children explicitly and render it inside the heading element? That should keep the behavior the same and avoid the new lint noise.
Contributor
There was a problem hiding this comment. this was a similar process as to what I have done with a different project. the idea being that they only thing that needs to be extracted is and then everything else is just passed through without worrying about what it is. if we are starting to use |
||
|
|
||
| export const H2 = forwardRef<HTMLHeadingElement, ComponentProps<"h2">>(({className, ...props}, ref) => { | ||
| return <h2 | ||
| ref={ref} | ||
| className={cn("text-highlight-500", className)} | ||
| {...props} | ||
| />; | ||
| }); | ||
| H2.displayName = "H2"; | ||
|
|
||
| export const H3 = forwardRef<HTMLHeadingElement, ComponentProps<"h3">>(({className, ...props}, ref) => { | ||
| return <h3 | ||
| ref={ref} | ||
| className={cn("text-highlight-500", className)} | ||
| {...props} | ||
| />; | ||
| }); | ||
| H3.displayName = "H3"; | ||
|
|
||
| export const H4 = forwardRef<HTMLHeadingElement, ComponentProps<"h4">>(({className, ...props}, ref) => { | ||
| return <h4 | ||
| ref={ref} | ||
| className={cn("text-highlight-500", className)} | ||
| {...props} | ||
| />; | ||
| }); | ||
| H4.displayName = "H4"; | ||
|
|
||
| export const H5 = forwardRef<HTMLHeadingElement, ComponentProps<"h5">>(({className, ...props}, ref) => { | ||
| return <h5 | ||
| ref={ref} | ||
| className={cn("text-highlight-500", className)} | ||
| {...props} | ||
| />; | ||
| }); | ||
| H5.displayName = "H5"; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Non-blocking: should this file be renamed to
typography.tsxbefore more imports depend on thetypeographyspelling?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, I should probably fix my bad spelling