Skip to content

Commit 021dfb3

Browse files
RikthepixelRikthepixel
committed
Prefix custom colors with cr-
1 parent f7a5f68 commit 021dfb3

25 files changed

+72
-81
lines changed

Diff for: ‎src/assets/state/contactMethods.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const contactMethods: IContactMethod[] = [
3737
{
3838
title: <>
3939
Discord <br />
40-
<span className="text-sm font-semibold text-fill-contrast">
40+
<span className="text-sm font-semibold text-cr-fill-contrast">
4141
(Coming Soon™)
4242
</span>
4343
</>,

Diff for: ‎src/components/controls/Button.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,9 @@ export const style = cva("relative flex items-center justify-center transition-c
1111
variants: {
1212
color: {
1313
white: "bg-neutral-200 hover:bg-neutral-50 border-neutral-400 text-neutral-900",
14-
primary: "bg-primary hover:bg-primary-light border-primary-dark text-primary-contrast",
15-
secondary: "bg-secondary hover:bg-secondary-light border-secondary-dark text-secondary-contrast"
14+
primary: "bg-cr-primary hover:bg-cr-primary-light border-cr-primary-light hover:border-cr-primary text-cr-primary-contrast"
1615
}
17-
}
16+
}
1817
});
1918

2019
export type BaseProps = {

Diff for: ‎src/components/controls/Input.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,7 @@ import { RequiredKeys } from "@/types/utility";
77
export const style = cva("w-full rounded-2xl py-2 px-3 border-2", {
88
variants: {
99
color: {
10-
primary: "border-primary bg-transparent placeholder:text-fill-contrast/75",
11-
secondary: "border-secondary bg-transparent placeholder:text-fill-contrast/75"
10+
primary: "border-cr-primary bg-transparent placeholder:text-cr-fill-contrast/75",
1211
},
1312
},
1413
defaultVariants: {

Diff for: ‎src/components/controls/Link.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ export const style = cva("transition-colors gap-2", {
1212
},
1313
color: {
1414
white: "text-white hover:text-neutral-300",
15-
primary: "text-primary hover:text-primary-light",
16-
secondary: "text-secondary hover:text-secondary-light",
17-
"fill-contrast": "text-fill-contrast hover:text-fill-contrast-light"
15+
primary: "text-cr-primary hover:text-cr-primary-light",
16+
"fill-contrast": "text-cr-fill-contrast hover:text-cr-fill-contrast-light"
1817
}
1918
},
2019
defaultVariants: {

Diff for: ‎src/components/controls/Select.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,14 @@ export type VariantProps = InputVariantProps;
1515
export const containerStyle = cva("absolute border-2 left-1/2 -translate-x-1/2 top-full rounded-2xl min-w-fit w-full overflow-hidden translate-y-1 z-50", {
1616
variants: {
1717
color: {
18-
primary: "border-primary bg-fill text-fill-contrast",
19-
secondary: "border-secondary bg-fill text-fill-contrast"
18+
primary: "border-cr-primary bg-cr-fill text-cr-fill-contrast"
2019
}
2120
}
2221
});
2322
export const itemStyle = cva("px-4 py-2", {
2423
variants: {
2524
color: {
26-
primary: "ui-active:bg-primary/20",
27-
secondary: "ui-active:bg-secondary/20"
25+
primary: "ui-active:bg-cr-primary/20"
2826
}
2927
}
3028
});

Diff for: ‎src/components/layout/Footer.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import Logo from "@/assets/images/brand/logo-200x200.webp";
44

55
const Footer = () => {
66
return (
7-
<div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-primary-contrast">
8-
<footer className="flex flex-col w-full gap-4 p-8 border-2 border-b-0 max-w-7xl rounded-t-2xl bg-primary image-dots from-primary-light border-primary-light">
7+
<div className="flex items-center justify-center w-[calc(100%_+_4rem)] pt-16 mt-auto text-cr-primary-contrast">
8+
<footer className="flex flex-col w-full gap-4 p-8 border-2 border-b-0 max-w-7xl rounded-t-2xl bg-cr-primary image-dots from-cr-primary-light border-cr-primary-light">
99
<div className="flex flex-col items-center gap-2 p-2 rounded-2xl bg-white/20 sm:flex-row backdrop-blur-[1.25px]">
1010
<div className="flex items-center gap-2">
1111
<img

Diff for: ‎src/components/layout/Header.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Header = () => {
2323
});
2424

2525
return (
26-
<header className="relative flex items-center w-full gap-4 p-4 transition-all border-b-2 md:px-8 md:gap-12 border-primary-light/10">
26+
<header className="relative flex items-center w-full gap-4 p-4 transition-all border-b-2 md:px-8 md:gap-12 border-cr-primary-light/10">
2727
<Link color="primary" className="flex items-center justify-center text-2xl font-bold transition-all lg:text-4xl" href="/">
2828
<img
2929
className="object-contain transition-all text-[0px] w-10 h-10 lg:w-12 lg:h-12"
@@ -37,7 +37,7 @@ const Header = () => {
3737
<Button
3838
ref={buttonRef}
3939
className="p-2 ml-auto rounded-full md:hidden"
40-
color="secondary"
40+
color="primary"
4141
aria-label="Expands the header"
4242
aria-expanded={open}
4343
aria-controls="header-items"
@@ -51,7 +51,7 @@ const Header = () => {
5151
</Button>
5252
<div
5353
ref={itemsContainerRef}
54-
className="absolute flex flex-col bg-fill gap-0 p-4 top-full inset-x-4 rounded-2xl border-2 border-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
54+
className="absolute flex flex-col bg-cr-fill gap-0 p-4 top-full inset-x-4 rounded-2xl border-2 border-cr-primary z-10 data-[expanded='false']:hidden md:data-[expanded='false']:flex md:flex-row md:items-center md:p-0 md:border-none md:static md:bg-transparent md:gap-12"
5555
id="header-items"
5656
data-expanded={open}
5757
>

Diff for: ‎src/components/layout/NavDropdown.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const NavDropdown = ({ summary, children }: NavDropdownProps) => {
5656
height="1em"
5757
/>
5858
</summary>
59-
<div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-2xl bg-fill text-fill-contrast group/dropdown border-primary md:w-fit" data-in-group>
59+
<div ref={containerRef} className="absolute inset-x-0 flex flex-col gap-2 px-4 py-2 border-2 rounded-2xl bg-cr-fill text-cr-fill-contrast group/dropdown border-cr-primary md:w-fit" data-in-group>
6060
{children}
6161
</div>
6262
</details>

Diff for: ‎src/components/layout/NavLink.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface NavLinkProps {
1010

1111
export const style = cva(`
1212
text-lg font-bold py-2
13-
aria-[current='page']:text-primary-light
13+
aria-[current='page']:text-cr-primary-light
1414
group-data-[in-group='true']/dropdown:text-base group-data-[in-group='true']/dropdown:py-0
1515
`);
1616

Diff for: ‎src/components/pages/about/Member.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import LinkButton from "@/components/controls/LinkButton";
33

44
const Member = ({ image, fullName, title, links }: IMember) => (
55
<li
6-
className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-2xl border-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
6+
className="flex flex-col items-center w-full max-w-full gap-2 p-4 border-2 rounded-2xl border-cr-primary-light motion-safe:transition-all sm:p-6 md:w-fit"
77
aria-label="Member"
88
>
99
<div className="flex flex-col items-center max-w-full gap-2 sm:flex-row md:flex-col">
@@ -16,16 +16,16 @@ const Member = ({ image, fullName, title, links }: IMember) => (
1616
height={image.height}
1717
/>
1818
<div className="flex flex-col max-w-full gap-2 py-4 text-center w-72">
19-
<p className="text-2xl font-semibold text-secondary" aria-label="Name">{fullName}</p>
20-
<p className="font-semibold text-secondary" aria-label="Title / Role">{title}</p>
19+
<p className="text-2xl font-semibold text-cr-primary" aria-label="Name">{fullName}</p>
20+
<p className="font-semibold text-cr-primary" aria-label="Title / Role">{title}</p>
2121
</div>
2222
</div>
2323
<div className="grid w-full grid-cols-1 gap-2 sm:grid-cols-2" aria-label="Links">
2424
{links.map((link, i) => (
2525
<LinkButton
2626
key={i}
2727
href={link.href}
28-
color="secondary"
28+
color="primary"
2929
aria-label="Link"
3030
>
3131
{link.name}

Diff for: ‎src/components/pages/about/Project.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,12 @@ const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText,
3232

3333
return (
3434
<li className="flex flex-col gap-4 w-96">
35-
<p className="text-xl font-semibold text-center text-primary">
35+
<p className="text-xl font-semibold text-center text-cr-primary">
3636
{title}
3737
</p>
3838
<button onClick={onImageClick}>
3939
<img
40-
className="border-2 rounded-2xl aspect-video border-primary"
40+
className="border-2 rounded-2xl aspect-video border-cr-primary"
4141
alt={thumbnailAlt}
4242
src={thumbnail.src}
4343
width={thumbnail.width}
@@ -47,7 +47,7 @@ const Project = ({ title, description, thumbnail, thumbnailAlt, href, linkText,
4747
<div className="flex flex-col gap-4">
4848
{description}
4949
</div>
50-
<LinkButton color="secondary" href={href} className="mt-auto" rel={linkRel}>
50+
<LinkButton color="primary" href={href} className="mt-auto" rel={linkRel}>
5151
{linkText ?? "Visit"}
5252
</LinkButton>
5353
</li>

Diff for: ‎src/components/pages/blog/ArticleBrief.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
5050

5151
return (
5252
<motion.li
53-
className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-2xl motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-dots from-fill-light border-2 border-primary overflow-hidden"
53+
className="origin-center flex flex-col flex-1 gap-4 mx-0 rounded-2xl motion-safe:transition-[margin-inline] motion-safe:duration-500 sm:mx-16 md:mx-0 image-dots from-cr-fill-light border-2 border-cr-primary overflow-hidden"
5454
variants={LIST_ANIM}
5555
initial="in"
5656
animate="anim"
@@ -73,7 +73,7 @@ const ArticleBrief = ({ title, thumbnail, thumbnailAlt, imgLoading, readtime, te
7373
!hidden && <li key={i}>
7474
<LinkButton
7575
href={makeTagUrl(name)}
76-
color="secondary"
76+
color="primary"
7777
className="px-2 py-1 text-xs font-semibold border"
7878
prefetch={false}
7979
>

Diff for: ‎src/components/pages/blog/post/ArticleMeta.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ const ArticleMeta = ({ author, readtime, created, updated }: ArticleMetaProps) =
2828
className="flex items-center gap-2 group/writer"
2929
//@ts-ignore
3030
href={author.links.length > 0 ? author.links[0].href : undefined}
31-
//@ts-ignore
3231
color={author.links.length > 0 ? "fill-contrast" : undefined}
3332
data-is-link={author.links.length > 0}
3433
>

Diff for: ‎src/components/pages/blog/post/ArticleTableOfContent.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const renderHierarchy = (hierarchy: HeadingHierarchy, config: RenderHierarchyCon
6060
<PlayIcon
6161
width=".6em"
6262
height=".6em"
63-
className="text-primary"
63+
className="text-"
6464
/>
6565
<Link
6666
color="primary"

Diff for: ‎src/components/pages/contribute/FeedbackSection.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const FeedbackSection = () => {
6161
oneTime
6262
>
6363
<div className="w-full">
64-
<Label htmlFor="message-input" className="text-start text-primary">
64+
<Label htmlFor="message-input" className="text-start text-cr-primary">
6565
Your Message:
6666
</Label>
6767
<TextArea
@@ -74,7 +74,7 @@ const FeedbackSection = () => {
7474
/>
7575
</div>
7676
<Error className="w-full px-2 text-start" state={formState} name="text" />
77-
<Button type="submit" color="secondary" loading={loading} className="w-full px-5 py-3 text-lg md:text-xl sm:w-fit">
77+
<Button type="submit" color="primary" loading={loading} className="w-full px-5 py-3 text-lg md:text-xl sm:w-fit">
7878
Submit Feedback
7979
</Button>
8080
</Form>

Diff for: ‎src/components/pages/front/Mission.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface MissionProps extends IMission {
77

88
const Mission = ({ title, image, imageAlt, text }: MissionProps) => {
99
return (
10-
<li className="flex flex-col items-center flex-1 gap-4 p-0 -mx-4 rounded-2xl border-primary motion-safe:transition-[margin_padding_border] sm:mx-0 lg:p-4 border-2 xl:p-8">
10+
<li className="flex flex-col items-center flex-1 gap-4 p-0 -mx-4 rounded-2xl border-cr-primary motion-safe:transition-[margin_padding_border] sm:mx-0 lg:p-4 border-2 xl:p-8">
1111
<Heading.H3 className="lg:h-[5ex] motion-safe:transition-all">
1212
{title}
1313
</Heading.H3>

Diff for: ‎src/components/pages/front/RoadmapItem.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export interface RoadmapItemProps extends IRoadmapItem {
66
}
77

88
const Divider = ({ hideOnSmall }: { hideOnSmall?: boolean; }) => (
9-
<div className={`relative w-[2px] bg-primary mx-3 group-first-of-type/item:rounded-t-full group-last-of-type/item:rounded-b-full ${hideOnSmall ? "hidden md:block" : "block md:hidden"}`} aria-hidden>
10-
<div className="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 border-2 rounded-full top-1/2 left-1/2 border-primary bg-fill" />
9+
<div className={`relative w-[2px] bg-cr-primary mx-3 group-first-of-type/item:rounded-t-full group-last-of-type/item:rounded-b-full ${hideOnSmall ? "hidden md:block" : "block md:hidden"}`} aria-hidden>
10+
<div className="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 border-2 rounded-full top-1/2 left-1/2 border-cr-primary bg-cr-fill" />
1111
</div>
1212
);
1313

@@ -17,7 +17,7 @@ const RoadmapItem = ({ title, text }: RoadmapItemProps) => {
1717
<li aria-labelledby={id} className="relative flex flex-1 group/item">
1818
<Divider />
1919
<div className="relative flex flex-col flex-1 gap-4 py-4 pl-4 md:flex-row md:pl-0 md:py-0 md:gap-0">
20-
<Heading.H3 id={id} className="flex items-center md:px-8 md:w-1/4 md:py-4 md:justify-end md:text-end text-primary-light">
20+
<Heading.H3 id={id} className="flex items-center md:px-8 md:w-1/4 md:py-4 md:justify-end md:text-end text-cr-primary-light">
2121
{title}
2222
</Heading.H3>
2323
<Divider hideOnSmall />

Diff for: ‎src/components/pages/front/SignupSection.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const SignupSection = () => {
5757
{perks.map(({ title, icon: Icon }, i) => (
5858
<li key={i} className="flex flex-col items-center w-32 gap-2">
5959
<Icon
60-
className="w-12 h-12 sm:w-16 sm:h-16 text-primary"
60+
className="w-12 h-12 sm:w-16 sm:h-16 text-cr-primary"
6161
width="1em"
6262
height="1em"
6363
/>
@@ -74,7 +74,7 @@ const SignupSection = () => {
7474
oneTime
7575
>
7676
<div className="w-full">
77-
<Label htmlFor="signup-email-input" className="text-primary ml-7">
77+
<Label htmlFor="signup-email-input" className="text-cr-primary ml-7">
7878
Email:
7979
</Label>
8080
<Input
@@ -89,7 +89,7 @@ const SignupSection = () => {
8989
<Button
9090
className="relative w-full px-5 py-3 text-lg sm:w-fit md:text-xl"
9191
type="submit"
92-
color="secondary"
92+
color="primary"
9393
loading={loading}
9494
>
9595
Keep me up-to-date!

Diff for: ‎src/pages/404.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,21 @@ const NotFound: Page = ({ pathname }) => {
2626
]} />
2727
</Head>
2828
<main className="flex items-center justify-center flex-1 w-full pb-8" aria-labelledby="not-found">
29-
<div className="flex flex-col gap-2 p-8 text-center border-2 rounded-2xl from-fill-light image-dots border-primary">
29+
<div className="flex flex-col gap-2 p-8 text-center border-2 rounded-2xl from-cr-fill-light image-dots border-cr-primary">
3030
<Heading.H1 id="not-found">
3131
Not Found.
3232
</Heading.H1>
3333
<p>There are no commits to be found here!</p>
3434
<div className="grid grid-cols-2 gap-2 mt-4">
35-
<LinkButton href="/" color="secondary">
35+
<LinkButton href="/" color="primary">
3636
<HomeModernIcon
3737
className="w-4 h-4"
3838
width="1em"
3939
height="1em"
4040
/>
4141
Home
4242
</LinkButton>
43-
<Button onClick={() => router.back()} color="secondary">
43+
<Button onClick={() => router.back()} color="primary">
4444
<ArrowUturnLeftIcon
4545
className="w-4 h-4"
4646
width="1em"

Diff for: ‎src/pages/blog/[pid]/[slug].tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -94,13 +94,13 @@ const BlogPostPage: Page<BlogPostPageProps> = ({ article: { author, tags, thumbn
9494
/>
9595
</CodeBlockHydrator>
9696
</section>
97-
<section aria-labelledby="article-tags" className="w-full pt-16 border-t border-primary mt-8">
97+
<section aria-labelledby="article-tags" className="w-full pt-16 border-t border-cr-primary mt-8">
9898
<h2 id="article-tags" className="text-xs font-bold mb-2">Tags:</h2>
9999
<ul aria-labelledby="article-tags" className="flex flex-wrap gap-1">
100100
{tags.map(({ name, hidden }, i) => (
101101
!hidden && <li key={i}>
102102
<LinkButton
103-
color="secondary"
103+
color="primary"
104104
href={makeTagUrl(name)}
105105
className="w-fit text-sm px-2 py-1"
106106
>

Diff for: ‎src/pages/blog/index.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -120,25 +120,25 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
120120
{articles.length > 0 && <>
121121
<div className="mx-0 sm:mx-16 md:mx-0 motion-safe:transition-[margin-inline] motion-safe:duration-500 flex gap-2 items-end">
122122
<div>
123-
<Label htmlFor="search-input" className="text-secondary">
123+
<Label htmlFor="search-input" className="text-cr-primary">
124124
Search:
125125
</Label>
126126
<Input
127127
id="search-input"
128128
type="text"
129-
color="secondary"
129+
color="primary"
130130
placeholder="Search..."
131131
{...register("search")}
132132
/>
133133
</div>
134134
<div>
135-
<Label htmlFor="sort-input" className="text-secondary">
135+
<Label htmlFor="sort-input" className="text-cr-primary">
136136
Sort:
137137
</Label>
138138
<ControlledSelect
139139
id="sort-input"
140140
name="sort"
141-
color="secondary"
141+
color="primary"
142142
control={control}
143143
options={SORT_OPTIONS}
144144
getDisplayName={(opt) => opt.name}
@@ -154,7 +154,7 @@ const BlogPage: Page<BlogPageProps> = ({ articles, pathname }) => {
154154
>
155155
<LinkButton
156156
href="/blog"
157-
color="secondary"
157+
color="primary"
158158
className="w-fit"
159159
>
160160
Clear Tags

Diff for: ‎src/pages/index.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const FrontPage: Page = ({ pathname }) => {
6060
className="w-full px-5 py-3 text-xl sm:w-fit"
6161
onClick={sendCTAEvent("Learn More")}
6262
href="#introduction"
63-
color="secondary"
63+
color="primary"
6464
scroll={false}
6565
>
6666
Learn More!
@@ -78,12 +78,12 @@ const FrontPage: Page = ({ pathname }) => {
7878
/>
7979
</div>
8080
</section>
81-
<section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-2xl xl:flex-row text-primary-contrast image-dots from-primary-light border-primary-light bg-primary">
82-
<Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-primary-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
81+
<section aria-label="introduction" className="flex flex-col gap-12 p-8 text-lg -mx-8 md:mx-0 motion-safe:transition-[margin] text-center border-2 rounded-2xl xl:flex-row text-cr-primary-contrast image-dots from-cr-primary-light border-cr-primary-light bg-cr-primary">
82+
<Heading.H2 id="introduction" className="flex p-4 flex-col items-center justify-center w-full rounded-2xl text-cr-primary-contrast bg-white/20 backdrop-blur-[1.25px] xl:p-0 xl:w-1/2">
8383
<span className="text-2xl">
8484
Introducing...
8585
</span>
86-
<span className="flex flex-col items-center gap-4 p-4 text-3xl font-bold break-normal sm:text-4xl text-primary-contrast md:text-6xl md:flex-row md:w-max">
86+
<span className="flex flex-col items-center gap-4 p-4 text-3xl font-bold break-normal sm:text-4xl text-cr-primary-contrast md:text-6xl md:flex-row md:w-max">
8787
<img
8888
className="w-16 h-16 md:w-[1.5em] md:h-[1.5em]"
8989
alt="A Small Rocket"

0 commit comments

Comments
 (0)