git.iko.soy/urbit.org
on master help sign in
use color scales
commit2fda4950c01afc05165a0cabc102e79119751f4c authorGavin Atkinson <gvnatknsn@protonmail.com> dateTue 10 Aug 2021, 17:05 (5 years ago) parent40d2646
33 files changed+249−213
compare with master
unifiedsplit
components/Contact.js+8−8 components/ContentArea.js+3−3 components/EventPreview.js+4−4 components/Footer.js+28−26 components/GrantPreview.js+9−9 components/Header.js+6−6 components/MenuTray.js+3−3 components/NewletterSignup.js+2−2 components/Pagination.js+2−2 components/PostPreview.js+2−2 components/Search.js+10−8 components/Sidebar.js+3−3 components/TableOfContents.js+3−1 content/getting-started/_index.md+1−1 pages/blog.js+2−2 pages/blog/[slug].js+2−2 pages/community/[[...slug]].js+4−4 pages/docs/[[...slug]].js+11−10 pages/events.js+5−5 pages/events/[slug].js+6−4 pages/getting-started/[[...slug]].js+8−7 pages/grants.js+17−16 pages/grants/[slug].js+10−8 pages/index.js+22−20 pages/media/[slug].js+5−3 pages/understanding-urbit/[[...slug]].js+7−7 pages/updates.js+4−4 pages/updates/[slug].js+3−3 pages/using/[[...slug]].js+8−7 styles/globals.css+6−5 styles/markdown.css+7−7 styles/prism.css+5−5 tailwind.config.js+33−16
components/Contact.js+8−8
@@ -53,8 +53,8 @@ export default function Contact({ emphasize }) {
5353 </svg>
5454 );
5555
56− const linkText = emphasize ? "text-green" : "text-black";
57− const border = emphasize ? "green" : "black";
56+ const linkText = emphasize ? "text-green-400" : "text-wall-600";
57+ const border = emphasize ? "border-green-400" : "border-wall-600";
5858
5959 return (
6060 <div>
@@ -65,32 +65,32 @@ export default function Contact({ emphasize }) {
6565 </h4>
6666 </div>
6767 <NewsletterSignup color={border} />
68− <h4 className="mt-12 text-gray">
68+ <h4 className="mt-12 text-wall-500">
6969 Follow us on{" "}
7070 <a className={linkText} href={contact.twitter}>
7171 Twitter
7272 </a>
7373 </h4>
74− <h4 className="mt-6 text-gray">
74+ <h4 className="mt-6 text-wall-500">
7575 Explore code on{" "}
7676 <a className={linkText} href={contact.github}>
7777 Github
7878 </a>
7979 </h4>
80− <h4 className="mt-6 text-gray">
80+ <h4 className="mt-6 text-wall-500">
8181 Ask questions in our{" "}
8282 <a className={linkText} href={contact.discord}>
8383 Discord
8484 </a>
8585 </h4>
86− <h4 className="mt-6 text-gray flex items-baseline flex-wrap">
86+ <h4 className="mt-6 text-wall-500 flex items-baseline flex-wrap">
8787 Boot Urbit and join{" "}
8888 <div className="md:ml-2 rounded-lg flex items-stretch">
89− <code className="rounded-l-lg px-2 md:px-4 py-2 bg-wall flex items-center h-full">
89+ <code className="rounded-l-lg px-2 md:px-4 py-2 bg-wall-100 flex items-center h-full">
9090 {contact.urbitCommunity}
9191 </code>
9292 <button
93− className="rounded-r-lg px-4 bg-wall ml-0.5 flex-1 flex justify-center items-center"
93+ className="rounded-r-lg px-4 bg-wall-100 ml-0.5 flex-1 flex justify-center items-center"
9494 onClick={() => copy()}
9595 >
9696 {buttonIcon}
components/ContentArea.js+3−3
@@ -47,16 +47,16 @@ export default function ContentArea(props) {
4747 className="px-4 md:px-12 lg:px-24 pb-24 pt-8 md:pt-10 lg:pt-16 flex flex-col w-full max-w-screen-xl max-h-screen h-screen overflow-y-scroll"
4848 >
4949 <div className="flex justify-between w-full items-center flex-shrink-0">
50− <div className="type-ui text-gray">{props.breadcrumbs}</div>
50+ <div className="type-ui text-wall-500">{props.breadcrumbs}</div>
5151 <div className="hidden md:block">
5252 <button
5353 onClick={(e) => {
5454 e.stopPropagation();
5555 props.search.toggleSearch();
5656 }}
57− className="bg-wall text-gray flex px-4 py-1 rounded-lg type-ui"
57+ className="bg-wall-100 text-wall-500 flex px-4 py-1 rounded-lg type-ui"
5858 >
59− Search<div className="ml-4 text-lightGray">{shortcut}</div>
59+ Search<div className="ml-4 text-wall-400">{shortcut}</div>
6060 </button>
6161 </div>
6262 </div>
components/EventPreview.js+4−4
@@ -2,15 +2,15 @@ import Link from "next/link";
22
33export default function EventPreview({ event, className, title, rsvp }) {
44 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
5− const grayText = event.extra?.dark ? "text-midWhite" : "text-gray";
6− const blackText = event.extra?.dark ? "text-white" : "text-black";
5+ const grayText = event.extra?.dark ? "text-midWhite" : "text-wall-500";
6+ const blackText = event.extra?.dark ? "text-white" : "text-wall-600";
77
88 return (
99 <div className={`cursor-pointer ${className}`}>
1010 {title ? <h3 className="mb-2">{title}</h3> : null}
1111 <div
1212 key={event.slug}
13− className={`bg-wall rounded-xl h-80 bg-cover bg-center bg-no-repeat`}
13+ className={`bg-wall-100 rounded-xl h-80 bg-cover bg-center bg-no-repeat`}
1414 style={{ backgroundImage: `url(${event.extra?.image})` || "" }}
1515 >
1616 <Link href={`/events/${event.slug}`}>
@@ -26,7 +26,7 @@ export default function EventPreview({ event, className, title, rsvp }) {
2626 {rsvp && event.extra.registration_url && event.extra.pinned ? (
2727 <div className="absolute right-0 bottom-0 p-4">
2828 <a
29− className="button-sm bg-green text-white"
29+ className="button-sm bg-green-400 text-white"
3030 href={event.extra.registration_url}
3131 >
3232 RSVP
components/Footer.js+28−26
@@ -5,41 +5,43 @@ import { contact } from "../lib/constants";
55
66export default function Footer() {
77 return (
8− <footer className="bg-wall w-full mt-48 flex justify-center">
8+ <footer className="bg-wall-100 w-full mt-48 flex justify-center">
99 <SingleColumn>
1010 <Section short className="flex flex-row flex-wrap">
1111 <div className="w-1/2 md:w-1/3 flex flex-col flex-shrink">
1212 <h4 className="mt-16 mb-8">Use Urbit</h4>
1313 <Link href="/getting-started">
1414 <div>
15− <a className="type-bold text-gray">Getting Started</a>
15+ <a className="type-bold text-wall-500">Getting Started</a>
1616 </div>
1717 </Link>
1818 <Link href="/using">
1919 <div>
20− <a className="type-bold text-gray">Operator's Manual</a>
20+ <a className="type-bold text-wall-500">Operator's Manual</a>
2121 </div>
2222 </Link>
2323 <Link href="https://github.com/urbit/port/releases">
2424 <div>
25− <a className="type-bold text-gray">Urbit Client</a>
25+ <a className="type-bold text-wall-500">Urbit Client</a>
2626 </div>
2727 </Link>
2828 <Link href="https://github.com/urbit/urbit/releases">
2929 <div>
30− <a className="mt-2 type-bold text-gray">Urbit Binaries</a>
30+ <a className="mt-2 type-bold text-wall-500">Urbit Binaries</a>
3131 </div>
3232 </Link>
3333 {
3434 // <Link href="">
3535 // <div>
36− // <a className="mt-2 type-bold text-gray">Urbit Apps</a>
36+ // <a className="mt-2 type-bold text-wall-500">Urbit Apps</a>
3737 // </div>
3838 // </Link>
3939 }
4040 <Link href="/getting-started/planet/#hosting-providers">
4141 <div>
42− <a className="mt-2 type-bold text-gray">Hosting Providers</a>
42+ <a className="mt-2 type-bold text-wall-500">
43+ Hosting Providers
44+ </a>
4345 </div>
4446 </Link>
4547 </div>
@@ -47,22 +49,22 @@ export default function Footer() {
4749 <h4 className="mt-16 mb-8">About</h4>
4850 <Link href="/understanding-urbit">
4951 <div>
50− <a className="type-bold text-gray">What's Urbit?</a>
52+ <a className="type-bold text-wall-500">What's Urbit?</a>
5153 </div>
5254 </Link>
5355 <Link href="/understanding-urbit/urbit-id">
5456 <div>
55− <a className="mt-2 type-bold text-gray">Urbit ID</a>
57+ <a className="mt-2 type-bold text-wall-500">Urbit ID</a>
5658 </div>
5759 </Link>
5860 <Link href="/understanding-urbit/urbit-os">
5961 <div>
60− <a className="mt-2 type-bold text-gray">Urbit OS</a>
62+ <a className="mt-2 type-bold text-wall-500">Urbit OS</a>
6163 </div>
6264 </Link>
6365 <Link href="/faq">
6466 <div>
65− <a className="mt-2 type-bold text-gray">FAQ</a>
67+ <a className="mt-2 type-bold text-wall-500">FAQ</a>
6668 </div>
6769 </Link>
6870 </div>
@@ -70,17 +72,17 @@ export default function Footer() {
7072 <h4 className="mt-16 mb-8">News</h4>
7173 <Link href="/blog">
7274 <div>
73− <a className="type-bold text-gray">Blog</a>
75+ <a className="type-bold text-wall-500">Blog</a>
7476 </div>
7577 </Link>
7678 <Link href="/events">
7779 <div>
78− <a className="mt-2 type-bold text-gray">Events</a>
80+ <a className="mt-2 type-bold text-wall-500">Events</a>
7981 </div>
8082 </Link>
8183 <Link href="/updates">
8284 <div>
83− <a className="mt-2 type-bold text-gray">Updates</a>
85+ <a className="mt-2 type-bold text-wall-500">Updates</a>
8486 </div>
8587 </Link>
8688 </div>
@@ -89,17 +91,17 @@ export default function Footer() {
8991 <h4 className="mt-16 mb-8">Develop</h4>
9092 <Link href="/docs">
9193 <div>
92− <a className="type-bold text-gray">Documentation</a>
94+ <a className="type-bold text-wall-500">Documentation</a>
9395 </div>
9496 </Link>
9597 <Link href="https://github.com/urbit">
9698 <div>
97− <a className="mt-2 type-bold text-gray">Github</a>
99+ <a className="mt-2 type-bold text-wall-500">Github</a>
98100 </div>
99101 </Link>
100102 <Link href="https://github.com/urbit/awesome-urbit#http-apis-airlock">
101103 <div>
102− <a className="mt-2 type-bold text-gray">Airlock APIs</a>
104+ <a className="mt-2 type-bold text-wall-500">Airlock APIs</a>
103105 </div>
104106 </Link>
105107 </div>
@@ -107,12 +109,12 @@ export default function Footer() {
107109 <h4 className="mt-16 mb-8">Contribute</h4>
108110 <Link href="https://github.com/urbit/urbit/issues">
109111 <div>
110− <a className="type-bold text-gray">Issue Tracker</a>
112+ <a className="type-bold text-wall-500">Issue Tracker</a>
111113 </div>
112114 </Link>
113115 <Link href="/grants">
114116 <div>
115− <a className="mt-2 type-bold text-gray">Urbit Grants</a>
117+ <a className="mt-2 type-bold text-wall-500">Urbit Grants</a>
116118 </div>
117119 </Link>
118120 </div>
@@ -121,22 +123,22 @@ export default function Footer() {
121123 <h4 className="mt-16 mb-8">Community</h4>
122124 <Link href="https://groups.google.com/a/urbit.org/g/dev?pli=1">
123125 <div>
124− <a className="type-bold text-gray">Dev Mailing List</a>
126+ <a className="type-bold text-wall-500">Dev Mailing List</a>
125127 </div>
126128 </Link>
127129 <Link href="https://discord.gg/CfSKKaB2ep">
128130 <div>
129− <a className="mt-2 type-bold text-gray">Support Discord</a>
131+ <a className="mt-2 type-bold text-wall-500">Support Discord</a>
130132 </div>
131133 </Link>
132134 <Link href="https://github.com/urbit/azimuth">
133135 <div>
134− <a className="mt-2 type-bold text-gray">Governance</a>
136+ <a className="mt-2 type-bold text-wall-500">Governance</a>
135137 </div>
136138 </Link>
137139 <Link href="https://twitter.com/urbit">
138140 <div>
139− <a className="mt-2 type-bold text-gray">Twitter</a>
141+ <a className="mt-2 type-bold text-wall-500">Twitter</a>
140142 </div>
141143 </Link>
142144 </div>
@@ -145,14 +147,14 @@ export default function Footer() {
145147 <div className="md:w-1/3">
146148 <Link href="/privacy">
147149 <div>
148− <a className="type-bold text-gray">Privacy Policy</a>
150+ <a className="type-bold text-wall-500">Privacy Policy</a>
149151 </div>
150152 </Link>
151153 </div>
152154 <div className="md:w-1/3">
153155 <Link href="/terms-of-service">
154156 <div>
155− <a className="type-bold text-gray">Terms of Service</a>
157+ <a className="type-bold text-wall-500">Terms of Service</a>
156158 </div>
157159 </Link>
158160 </div>
@@ -160,7 +162,7 @@ export default function Footer() {
160162 <div>
161163 <a
162164 href={"mailto:" + contact.email}
163− className="type-bold text-gray"
165+ className="type-bold text-wall-500"
164166 >
165167 {contact.email}
166168 </a>
components/GrantPreview.js+9−9
@@ -8,14 +8,14 @@ export default function GrantPreview({ grant }) {
88
99 const className = classnames({
1010 "bg-lightBlue": type.includes("Proposal") && isOpen,
11− "bg-lightGreen": type.includes("Apprenticeship") && isOpen,
12− "bg-lightYellow": type.includes("Bounty") && isOpen,
11+ "bg-green-200": type.includes("Apprenticeship") && isOpen,
12+ "bg-yellow-100": type.includes("Bounty") && isOpen,
1313 });
1414
1515 return (
1616 <div
1717 key={grant.slug}
18− className={`mb-4 cursor-pointer bg-wall rounded-lg ${className}`}
18+ className={`mb-4 cursor-pointer bg-wall-100 rounded-lg ${className}`}
1919 >
2020 <Link href={`/grants/${grant.slug}`}>
2121 <div className="p-8">
@@ -23,13 +23,13 @@ export default function GrantPreview({ grant }) {
2323 <h3 className="type-ui" id={grant.slug}>
2424 {grant.title}
2525 </h3>
26− <div className={`bg-gray text-wall badge-sm ml-2`}>
26+ <div className={`bg-wall-500 text-wall-100 badge-sm ml-2`}>
2727 {!isCompleted ? (isOpen ? "Open" : "In Progress") : "Completed"}
2828 </div>
2929 </div>
3030 <p className="mb-4">{grant.extra.description}</p>
3131 <div className="flex w-full flex-col md:flex-row md:items-center justify-between">
32− <p className="text-gray">
32+ <p className="text-wall-500">
3333 <strong>Reward: </strong>
3434 {grant.extra.reward} star
3535 {grant.extra.reward === 1 ? "" : "s"}
@@ -37,9 +37,9 @@ export default function GrantPreview({ grant }) {
3737 <div className="flex items-center flex-wrap md:mt-0 mt-4">
3838 {grant.taxonomies.grant_type.map((category) => {
3939 const className = classnames({
40− "bg-blue text-white": category === "Proposal",
41− "bg-green text-white": category === "Apprenticeship",
42− "bg-yellow": category === "Bounty",
40+ "bg-blue-400 text-white": category === "Proposal",
41+ "bg-green-400 text-white": category === "Apprenticeship",
42+ "bg-yellow-300": category === "Bounty",
4343 });
4444 return (
4545 <div className={`${className} badge-sm mr-1 my-1`}>
@@ -48,7 +48,7 @@ export default function GrantPreview({ grant }) {
4848 );
4949 })}
5050 {grant.taxonomies.grant_category.map((category) => (
51− <div className="bg-gray text-wall badge-sm mr-1 my-1">
51+ <div className="bg-wall-500 text-wall-100 badge-sm mr-1 my-1">
5252 {category}
5353 </div>
5454 ))}
components/Header.js+6−6
@@ -11,8 +11,8 @@ function ActiveLink({ children, href, className, currentPath }) {
1111 const firstCrumb = currentPath.split("/")[1];
1212
1313 const activeClassName = classnames({
14− "text-black": "/" + firstCrumb === href,
15− "text-gray": "/" + firstCrumb !== href,
14+ "text-wall-600": "/" + firstCrumb === href,
15+ "text-wall-500": "/" + firstCrumb !== href,
1616 });
1717
1818 return (
@@ -55,7 +55,7 @@ export default function Header(props) {
5555 </Link>
5656 {routeDepth > 2 ? (
5757 <Link href={`/${firstCrumb}`}>
58− <a className="inline md:hidden type-ui text-gray ml-2">
58+ <a className="inline md:hidden type-ui text-wall-500 ml-2">
5959 {capitalize(firstCrumb)}
6060 </a>
6161 </Link>
@@ -88,7 +88,7 @@ export default function Header(props) {
8888 </ActiveLink>
8989 <ActiveLink
9090 currentPath={currentPath}
91− className="mr-5 text-green type-ui button-text"
91+ className="mr-5 text-green-400 type-ui button-text"
9292 href="/getting-started"
9393 >
9494 Get Started
@@ -98,10 +98,10 @@ export default function Header(props) {
9898 e.stopPropagation();
9999 props.search.toggleSearch(e);
100100 }}
101− className="bg-wall text-gray flex px-4 py-1 rounded-lg type-ui"
101+ className="bg-wall-100 text-wall-500 flex px-4 py-1 rounded-lg type-ui"
102102 >
103103 <div>Search</div>
104− <div className="ml-4 text-lightGray">{shortcut}</div>
104+ <div className="ml-4 text-wall-400">{shortcut}</div>
105105 </button>
106106 </nav>
107107
components/MenuTray.js+3−3
@@ -44,7 +44,7 @@ export default function MenuTray({ isOpen, setTray, search, children }) {
4444 className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
4545 />
4646 <div
47− className={`absolute bg-wall h-screen top-0 left-0 tray-menu-width overflow-y-scroll mb-24 ${trayClasses}`}
47+ className={`absolute bg-wall-100 h-screen top-0 left-0 tray-menu-width overflow-y-scroll mb-24 ${trayClasses}`}
4848 >
4949 <div
5050 {...handlers}
@@ -59,7 +59,7 @@ export default function MenuTray({ isOpen, setTray, search, children }) {
5959 e.stopPropagation();
6060 search.toggleSearch(e);
6161 }}
62− className={`z-10 fixed px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-gray left-4 right-4 bottom-4 mobile-search-button-width ${
62+ className={`z-10 fixed px-4 items-center justify-center type-ui rounded-xl h-16 bg-white text-wall-500 left-4 right-4 bottom-4 mobile-search-button-width ${
6363 isOpen ? "flex" : "hidden"
6464 }`}
6565 >
@@ -68,7 +68,7 @@ export default function MenuTray({ isOpen, setTray, search, children }) {
6868 </nav>
6969 <button
7070 onClick={() => setTray(!isOpen)}
71− className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-ultraDeepWall flex items-center justify-center rounded-full md:hidden"
71+ className="z-10 fixed bottom-4 right-4 w-16 h-16 bg-wall-600 flex items-center justify-center rounded-full md:hidden"
7272 >
7373 {isOpen ? (
7474 <svg
components/NewletterSignup.js+2−2
@@ -12,7 +12,7 @@ export default function NewsletterSignup(props) {
1212 <div className="input-group" id="mc_embed_signup_scroll">
1313 <div className="mc-field-group w-full relative">
1414 <input
15− className={`appearance-none outline-none text-gray type-ui black border-${
15+ className={`appearance-none outline-none text-wall-500 type-ui black border-${
1616 props.color || "black"
1717 } border-4 px-3 w-full mb-2 h-16 rounded-xl`}
1818 type="email"
@@ -23,7 +23,7 @@ export default function NewsletterSignup(props) {
2323 <div className="flex h-16 items-center justify-center absolute top-0 right-6">
2424 <button
2525 id="mc-embedded-subscribe"
26− className="type-ui text-gray bg-transparent"
26+ className="type-ui text-wall-500 bg-transparent"
2727 type="submit"
2828 name="subscribe"
2929 >
components/Pagination.js+2−2
@@ -8,11 +8,11 @@ export default function Pagination(props) {
88 key={`post-${props.post.slug}`}
99 >
1010 <div
11− className="bg-wall cursor-pointer font-semibold p-2 px-4 rounded-xl flex"
11+ className="bg-wall-100 cursor-pointer font-semibold p-2 px-4 rounded-xl flex"
1212 style={{ maxWidth: "45%" }}
1313 >
1414 <p className="flex-shrink-0 pr-1">{props.previous ? "<- " : ""}</p>
15− <p className="text-black truncate">{props.post.title}</p>
15+ <p className="text-wall-600 truncate">{props.post.title}</p>
1616 <p className="flex-shrink-0 pl-1">{props.next ? " ->" : ""}</p>
1717 </div>
1818 </Link>
components/PostPreview.js+2−2
@@ -26,12 +26,12 @@ export default function PostPreview(props) {
2626 </div>
2727 ) : null}
2828 {props.post.extra.ship ? (
29− <div className="type-sub-bold text-gray font-mono">
29+ <div className="type-sub-bold text-wall-500 font-mono">
3030 {props.post.extra.ship}
3131 </div>
3232 ) : null}
3333 </div>
34− <div className="text-gray type-sub mt-1">
34+ <div className="text-wall-500 type-sub mt-1">
3535 {formatDate(new Date(props.post.date))}
3636 </div>
3737 </div>
components/Search.js+10−8
@@ -96,7 +96,7 @@ class Search extends Component {
9696 >
9797 <input
9898 autoFocus
99− className="text-lg md:text-xl lg:text-2xl font-medium text-green bg-transparent py-2 px-4 outline-none relative w-full"
99+ className="text-lg md:text-xl lg:text-2xl font-medium text-green-400 bg-transparent py-2 px-4 outline-none relative w-full"
100100 placeholder="Search..."
101101 type="text"
102102 onClick={(e) => e.stopPropagation()}
@@ -119,7 +119,7 @@ class Search extends Component {
119119 return (
120120 <li
121121 className={`cursor-pointer flex text-left w-full ${
122− selected ? "bg-green" : ""
122+ selected ? "bg-green-400" : ""
123123 }`}
124124 {...getItemProps({
125125 key: item.content.slug + "-" + index,
@@ -131,13 +131,15 @@ class Search extends Component {
131131 <div className="font-semibold p-3">
132132 <p
133133 className={`text-base ${
134− selected ? "text-white" : "text-black"
134+ selected ? "text-white" : "text-wall-600"
135135 }`}
136136 >
137137 {item.content.symbol.length > 0 && (
138138 <code
139139 className={`mr-1 rounded px-1 py-0.5 ${
140− selected ? "bg-washedWhite" : "bg-wall"
140+ selected
141+ ? "bg-washedWhite"
142+ : "bg-wall-100"
141143 }`}
142144 >
143145 {item.content.symbol}
@@ -147,7 +149,7 @@ class Search extends Component {
147149 </p>
148150 <p
149151 className={`font-normal text-base mt-1 ${
150− selected ? "text-white" : "text-black"
152+ selected ? "text-white" : "text-wall-600"
151153 }`}
152154 >
153155 {item.content.desc}
@@ -160,7 +162,7 @@ class Search extends Component {
160162 return (
161163 <li
162164 className={`cursor-pointer flex text-left w-full ${
163− selected ? "bg-green" : ""
165+ selected ? "bg-green-400" : ""
164166 }`}
165167 {...getItemProps({
166168 key: item.content.link + "-" + index,
@@ -172,7 +174,7 @@ class Search extends Component {
172174 <div className="p-3">
173175 <p
174176 className={`font-medium text-base ${
175− selected ? "text-white" : "text-black"
177+ selected ? "text-white" : "text-wall-600"
176178 }`}
177179 >
178180 {item.content.parent !== "Content"
@@ -182,7 +184,7 @@ class Search extends Component {
182184 </p>
183185 <p
184186 className={`text-base font-regular text-small ${
185− selected ? "text-midWhite" : "text-gray"
187+ selected ? "text-midWhite" : "text-wall-500"
186188 }`}
187189 >
188190 {item.content.content}
components/Sidebar.js+3−3
@@ -6,10 +6,10 @@ export default function Sidebar(props) {
66 const [isOpen, setTray] = useState(false);
77 return (
88 <>
9− <div className="hidden md:flex flex-col w-96 bg-wall max-h-screen h-screen">
9+ <div className="hidden md:flex flex-col w-96 bg-wall-100 max-h-screen h-screen">
1010 <header className="flex flex-shrink-0 justify-between items-center pl-6 pt-12 mt-5 pb-8">
1111 <Link href="/">
12− <a className="type-ui text-gray">Urbit</a>
12+ <a className="type-ui text-wall-500">Urbit</a>
1313 </Link>
1414 </header>
1515 <div className="overflow-y-auto p-6 pt-16">
@@ -21,7 +21,7 @@ export default function Sidebar(props) {
2121 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
2222 <header className="flex flex-shrink-0 justify-between items-center pb-8">
2323 <Link href="/">
24− <a className="type-ui text-gray">Urbit</a>
24+ <a className="type-ui text-wall-500">Urbit</a>
2525 </Link>
2626 </header>
2727 {props.children}
components/TableOfContents.js+3−1
@@ -62,7 +62,9 @@ const Headings = ({ headings, activeId }) => (
6262 {heading.items.map((child) => (
6363 <li
6464 key={child.id}
65− className={child.id === activeId ? "text-green" : "text-gray"}
65+ className={
66+ child.id === activeId ? "text-green-400" : "text-wall-500"
67+ }
6668 >
6769 <a href={`#${child.id}`}>{child.title}</a>
6870 </li>
content/getting-started/_index.md+1−1
@@ -19,7 +19,7 @@ If you run Windows, or just want to give it a shot without worrying about the gr
1919 <label for="port-macos">MacOS</label>
2020 <div class="tab">
2121 <p>To install <strong>Port</strong> on MacOS simply download and open the <code>.dmg</code> file.</p>
22− <a href="https://github.com/urbit/port/releases/latest/download/Port.dmg" class="badge-sm bg-green text-white" style="width: 12rem;">
22+ <a href="https://github.com/urbit/port/releases/latest/download/Port.dmg" class="badge-sm bg-green-400 text-white" style="width: 12rem;">
2323 Download Port
2424 </a>
2525 </div>
pages/blog.js+2−2
@@ -60,12 +60,12 @@ export default function Blog({ posts, search }) {
6060 </div>
6161 ) : null}
6262 {post.extra.ship ? (
63− <div className="type-sub-bold text-gray font-mono">
63+ <div className="type-sub-bold text-wall-500 font-mono">
6464 {post.extra.ship}
6565 </div>
6666 ) : null}
6767 </div>
68− <div className="text-gray type-sub">
68+ <div className="text-wall-500 type-sub">
6969 {formatDate(new Date(post.date))}
7070 </div>
7171 </div>
pages/blog/[slug].js+2−2
@@ -46,12 +46,12 @@ export default function Post({
4646 <div className="type-sub-bold mr-2">{post.extra.author}</div>
4747 ) : null}
4848 {post.extra.ship ? (
49− <div className="type-sub-bold text-gray font-mono">
49+ <div className="type-sub-bold text-wall-500 font-mono">
5050 {post.extra.ship}
5151 </div>
5252 ) : null}
5353 </div>
54− <div className="text-gray type-sub">
54+ <div className="text-wall-500 type-sub">
5555 {formatDate(new Date(post.date))}
5656 </div>
5757 </Section>
pages/community/[[...slug]].js+4−4
@@ -43,11 +43,11 @@ const pageTree = (thisLink, tree, level = 0) => {
4343 const isThisPage = router.asPath === thisLink;
4444
4545 const pageItemClasses = classnames({
46− "pl-4 text-black text-base hover:text-green": level === 0,
47− "pl-8 text-black text-base hover:text-green": level === 1,
48− "pl-12 text-black text-base hover:text-green": level === 2,
46+ "pl-4 text-wall-600 text-base hover:text-green-400": level === 0,
47+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
48+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
4949 "dot relative": isThisPage,
50− "text-green": isThisPage,
50+ "text-green-400": isThisPage,
5151 });
5252
5353 return (
pages/docs/[[...slug]].js+11−10
@@ -57,16 +57,17 @@ const pageTree = (thisLink, tree, level = 0) => {
5757 });
5858
5959 const headingItemClasses = classnames({
60− "pl-0 text-black text-base font-semibold hover:text-green leading-relaxed":
60+ "pl-0 text-wall-600 text-base font-semibold hover:text-green-400 leading-relaxed":
6161 level === 0,
62− "pl-4 text-black text-base font-semibold hover:text-green": level === 1,
63− "pl-8 text-black text-base hover:text-green": level === 2,
62+ "pl-4 text-wall-600 text-base font-semibold hover:text-green-400":
63+ level === 1,
64+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 2,
6465 });
6566
6667 const pageItemClasses = classnames({
67− "pl-4 text-black text-base hover:text-green": level === 0,
68− "pl-8 text-black text-base hover:text-green": level === 1,
69− "pl-12 text-black text-base hover:text-green": level === 2,
68+ "pl-4 text-wall-600 text-base hover:text-green-400": level === 0,
69+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
70+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
7071 });
7172
7273 return (
@@ -81,7 +82,7 @@ const pageTree = (thisLink, tree, level = 0) => {
8182 const isSelected = router.asPath === href;
8283 const selectedClasses = classnames({
8384 dot: isSelected,
84− "text-green": isSelected,
85+ "text-green-400": isSelected,
8586 });
8687 return (
8788 <li>
@@ -116,10 +117,10 @@ export default function DocsLayout({
116117 const isSelected = "/docs".includes(router.asPath);
117118 const selectedClasses = classnames({
118119 dot: isSelected,
119− "text-green": isSelected,
120− "text-black": !isSelected,
120+ "text-green-400": isSelected,
121+ "text-wall-600": !isSelected,
121122 });
122− const rootClasses = "pl-0 text-base hover:text-green";
123+ const rootClasses = "pl-0 text-base hover:text-green-400";
123124 return (
124125 <>
125126 <Head>
pages/events.js+5−5
@@ -11,13 +11,13 @@ import { contact } from "../lib/constants";
1111
1212export function EventCard({ event, dir, className }) {
1313 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
14− const grayText = event.extra?.dark ? "text-midWhite" : "text-gray";
15− const blackText = event.extra?.dark ? "text-white" : "text-black";
14+ const grayText = event.extra?.dark ? "text-midWhite" : "text-wall-500";
15+ const blackText = event.extra?.dark ? "text-white" : "text-wall-600";
1616
1717 return (
1818 <div
1919 key={event.slug}
20− className={`mb-24 cursor-pointer bg-wall rounded-xl h-96 bg-cover bg-center bg-no-repeat ${className}`}
20+ className={`mb-24 cursor-pointer bg-wall-100 rounded-xl h-96 bg-cover bg-center bg-no-repeat ${className}`}
2121 style={{
2222 backgroundImage:
2323 `${
@@ -94,7 +94,7 @@ export default function Events({ pastEvents, comingSoon, search }) {
9494 {comingSoon.length > 0 ? (
9595 <>
9696 <div className="mb-8 table">
97− <h3 className="text-gray">Coming Soon</h3>
97+ <h3 className="text-wall-500">Coming Soon</h3>
9898 </div>
9999 {comingSoon.map((post) => {
100100 return <EventCard event={post} />;
@@ -102,7 +102,7 @@ export default function Events({ pastEvents, comingSoon, search }) {
102102 </>
103103 ) : null}
104104 <div className="mb-8 table">
105− <h3 className="text-gray">Past Events</h3>
105+ <h3 className="text-wall-500">Past Events</h3>
106106 </div>
107107 {pastEvents.map((post) => {
108108 return <EventCard event={post} />;
pages/events/[slug].js+6−4
@@ -38,21 +38,23 @@ export default function Event({
3838 <h1>{post.title}</h1>
3939
4040 {post.extra.author ? (
41− <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">
41+ <div className="type-ui text-wall-500 mt-4 md:mt-8 lg:mt-10">
4242 {post.extra.author}
4343 </div>
4444 ) : null}
4545 {post.extra.ship ? (
46− <div className="type-ui text-gray font-mono">{post.extra.ship}</div>
46+ <div className="type-ui text-wall-500 font-mono">
47+ {post.extra.ship}
48+ </div>
4749 ) : null}
4850
4951 <div className="mt-16">
50− <p className="type-ui text-gray">
52+ <p className="type-ui text-wall-500">
5153 {formatDate(new Date(post.date))} {", " + post.extra.time}
5254 </p>
5355 {post.extra.registration_url && post.extra.pinned ? (
5456 <a
55− className="button-sm bg-green text-white flex-0 mt-4"
57+ className="button-sm bg-green-400 text-white flex-0 mt-4"
5658 href={post.extra.registration_url}
5759 >
5860 RSVP
pages/getting-started/[[...slug]].js+8−7
@@ -43,11 +43,12 @@ const pageTree = (thisLink, tree, level = 0) => {
4343 const isThisPage = router.asPath === thisLink;
4444
4545 const pageItemClasses = classnames({
46− "pl-0 font-semibold text-gray text-base hover:text-green": level === 0,
47− "pl-8 text-black text-base hover:text-green": level === 1,
48− "pl-12 text-black text-base hover:text-green": level === 2,
46+ "pl-0 font-semibold text-wall-500 text-base hover:text-green-400":
47+ level === 0,
48+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
49+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
4950 "dot relative": isThisPage,
50− "text-green": isThisPage,
51+ "text-green-400": isThisPage,
5152 });
5253
5354 return (
@@ -64,10 +65,10 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
6465 const isSelected = "/getting-started".includes(router.asPath);
6566 const selectedClasses = classnames({
6667 dot: isSelected,
67− "text-green": isSelected,
68− "text-gray": !isSelected,
68+ "text-green-400": isSelected,
69+ "text-wall-500": !isSelected,
6970 });
70− const rootClasses = "pl-0 font-semibold text-base hover:text-green";
71+ const rootClasses = "pl-0 font-semibold text-base hover:text-green-400";
7172
7273 return (
7374 <>
pages/grants.js+17−16
@@ -157,17 +157,17 @@ export default function Grants({
157157 </div>
158158 <div className="flex flex-wrap">
159159 <Link href="#find-a-grant">
160− <button className="button-lg bg-green text-white mr-2">
160+ <button className="button-lg bg-green-400 text-white mr-2">
161161 View Grants
162162 </button>
163163 </Link>
164164 <Link href="#proposals">
165− <button className="button-lg bg-blue text-white mr-2">
165+ <button className="button-lg bg-blue-400 text-white mr-2">
166166 Submit a Proposal
167167 </button>
168168 </Link>
169169 <Link href="#gifts">
170− <a className="button-lg bg-ultraDeepWall text-white mr-2">
170+ <a className="button-lg bg-wall-600 text-white mr-2">
171171 Recent Gifts
172172 </a>
173173 </Link>
@@ -190,9 +190,9 @@ export default function Grants({
190190 {featuredGrants.map((grant) => {
191191 return (
192192 <Link href={"/grants/" + grant.slug}>
193− <div className="p-8 bg-washedGreen rounded-lg w-full md:w-1/3 cursor-pointer">
193+ <div className="p-8 bg-green-100 rounded-lg w-full md:w-1/3 cursor-pointer">
194194 <h4 className="pb-4">{grant.title}</h4>
195− <p className="text-green pb-4">
195+ <p className="text-green-400 pb-4">
196196 {grant.extra.reward} star
197197 {grant.extra.reward === 1 ? "" : "s"}{" "}
198198 {grant.extra.completed ? "awarded" : "pending"}
@@ -223,7 +223,7 @@ export default function Grants({
223223
224224 <Link href="#find-a-grant">
225225 <button
226− className="button-lg bg-blue text-white mr-2"
226+ className="button-lg bg-blue-400 text-white mr-2"
227227 onClick={() => {
228228 setIncludeInProgress(true);
229229 setIncludeCompleted(true);
@@ -247,7 +247,7 @@ export default function Grants({
247247 {/* Uncomment once people added to content/gifts folder. */}
248248 {/* {gifts.map((e) => {
249249 return (
250− <div className="bg-wall rounded-xl p-4 my-8 flex justify-between">
250+ <div className="bg-wall-100 rounded-xl p-4 my-8 flex justify-between">
251251 <p className="font-semibold">
252252 {e.name}
253253 </p>
@@ -278,7 +278,7 @@ export default function Grants({
278278 <h2 id="find-a-grant" className="pb-8">
279279 Find a Grant
280280 </h2>
281− <h5 className="text-black font-semibold my-2">Work Programs</h5>
281+ <h5 className="text-wall-600 font-semibold my-2">Work Programs</h5>
282282 <div className="flex flex-wrap items-center pb-2">
283283 <button
284284 onClick={() => {
@@ -286,18 +286,19 @@ export default function Grants({
286286 setTypes(types);
287287 }}
288288 className={`badge-lg my-2 mr-2 ${
289− tab === 0 ? "text-white bg-black" : "text-gray bg-wall"
289+ tab === 0 ? "text-white bg-black" : "text-wall-500 bg-wall-100"
290290 }`}
291291 >
292292 All <div className="opacity-50 ml-2">{allCount}</div>
293293 </button>
294294 {types.map((type, index) => {
295295 const className = classnames({
296− "bg-blue text-white": tab === index + 1 && type === "Proposal",
297− "bg-green text-white":
296+ "bg-blue-400 text-white":
297+ tab === index + 1 && type === "Proposal",
298+ "bg-green-400 text-white":
298299 tab === index + 1 && type === "Apprenticeship",
299− "bg-yellow": tab === index + 1 && type === "Bounty",
300− "bg-wall text-gray": tab !== index + 1,
300+ "bg-yellow-300": tab === index + 1 && type === "Bounty",
301+ "bg-wall-100 text-wall-500": tab !== index + 1,
301302 });
302303 return (
303304 <button
@@ -313,13 +314,13 @@ export default function Grants({
313314 );
314315 })}
315316 </div>
316− <h5 className="text-black font-semibold my-2">Work Categories</h5>
317+ <h5 className="text-wall-600 font-semibold my-2">Work Categories</h5>
317318 <div className="flex flex-wrap mb-12">
318319 {categories.map((category) => {
319320 const isActive = activeTags.includes(category);
320321 const activeClasses = classnames({
321− "bg-green text-white": isActive,
322− "bg-wall text-gray": !isActive,
322+ "bg-green-400 text-white": isActive,
323+ "bg-wall-100 text-wall-500": !isActive,
323324 });
324325 return (
325326 <button
pages/grants/[slug].js+10−8
@@ -37,22 +37,24 @@ export default function Grant({ post, markdown, search, similarGrants }) {
3737 <Section narrow short>
3838 <h1>{post.title}</h1>
3939 {post.extra.assignee ? (
40− <div className="type-ui text-gray mt-4">
40+ <div className="type-ui text-wall-500 mt-4">
4141 Grantee: {post.extra.assignee}
4242 </div>
4343 ) : null}
4444 {post.extra.ship ? (
45− <div className="type-ui text-gray font-mono">{post.extra.ship}</div>
45+ <div className="type-ui text-wall-500 font-mono">
46+ {post.extra.ship}
47+ </div>
4648 ) : null}
47− <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">
49+ <div className="type-ui text-wall-500 mt-4 md:mt-8 lg:mt-10">
4850 {formatDate(new Date(post.date))}
4951 </div>
5052 <div className="flex items-center flex-wrap mt-4 md:mt-8 lg:mt-10">
5153 {post.taxonomies.grant_type.map((category) => {
5254 const className = classnames({
53− "bg-blue text-white": category === "Proposal",
54− "bg-green text-white": category === "Apprenticeship",
55− "bg-yellow": category === "Bounty",
55+ "bg-blue-400 text-white": category === "Proposal",
56+ "bg-green-400 text-white": category === "Apprenticeship",
57+ "bg-yellow-300": category === "Bounty",
5658 });
5759 return (
5860 <div className={`${className} badge-sm mr-1 my-1`}>
@@ -61,7 +63,7 @@ export default function Grant({ post, markdown, search, similarGrants }) {
6163 );
6264 })}
6365 {post.taxonomies.grant_category.map((category) => (
64− <div className="bg-gray text-wall badge-sm mr-1 my-1">
66+ <div className="bg-wall-500 text-wall-100 badge-sm mr-1 my-1">
6567 {category}
6668 </div>
6769 ))}
@@ -72,7 +74,7 @@ export default function Grant({ post, markdown, search, similarGrants }) {
7274 </Section>
7375 {canApply && (
7476 <a
75− className="bg-green text-white badge-sm"
77+ className="bg-green-400 text-white badge-sm"
7678 href={post?.extra?.work_request_link}
7779 target="_blank"
7880 >
pages/index.js+22−20
@@ -22,21 +22,21 @@ export default function Home({ posts, events, openGrantsCount, search }) {
2222 const agent = window.navigator.appVersion;
2323 if (agent.includes("Win")) {
2424 return (
25− <span className="button-lg type-ui mb-5 bg-ultraDeepWall text-white">
25+ <span className="button-lg type-ui mb-5 bg-wall-600 text-white">
2626 Coming soon for Windows
2727 </span>
2828 );
2929 } else if (agent.includes("Mac")) {
3030 return (
3131 <a href="https://github.com/urbit/port/releases/latest/download/Port.dmg">
32− <button className="button-lg type-ui mb-5 bg-green text-white">
32+ <button className="button-lg type-ui mb-5 bg-green-400 text-white">
3333 Download For macOS
3434 </button>
3535 </a>
3636 );
3737 } else if (agent.includes("Linux")) {
3838 return (
39− <code className="button-lg type-ui mb-5 bg-ultraDeepWall text-white">
39+ <code className="button-lg type-ui mb-5 bg-wall-600 text-white">
4040 sudo snap install port
4141 </code>
4242 );
@@ -70,11 +70,11 @@ export default function Home({ posts, events, openGrantsCount, search }) {
7070 // Introducing Port
7171 }
7272 <Section className="hidden md:flex">
73− <div className="bg-wall w-11/12 port-hero-card-height rounded-3xl flex">
73+ <div className="bg-wall-100 w-11/12 port-hero-card-height rounded-3xl flex">
7474 <div className="pt-20 pl-12 w-7/12">
7575 <div className="pb-8">
7676 <h2 className="p-0 m-0 pb-2 leading-none">Introducing</h2>
77− <h2 className="text-green p-0 m-0 leading-none">Port</h2>
77+ <h2 className="text-green-400 p-0 m-0 leading-none">Port</h2>
7878 </div>
7979 <h4 className="pb-8">The Urbit client, now in beta.</h4>
8080 <p className="pb-24">
@@ -84,7 +84,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
8484 {heroButton}
8585 <a
8686 href="https://github.com/urbit/port"
87− className="type-ui text-gray"
87+ className="type-ui text-wall-500"
8888 >
8989 View on GitHub
9090 </a>
@@ -100,29 +100,31 @@ export default function Home({ posts, events, openGrantsCount, search }) {
100100 <div className="flex items-center pb-12">
101101 <h2 className="m-0 p-0 mr-4">Grants</h2>
102102 <Link href="/grants#find-a-grant">
103− <a className="bg-green text-white badge-lg">
103+ <a className="bg-green-400 text-white badge-lg">
104104 {openGrantsCount} Open
105105 </a>
106106 </Link>
107107 </div>
108− <div className="flex flex-col md:flex-row w-full items-center md:items-start bg-washedGreen px-8 py-8 rounded-xl">
108+ <div className="flex flex-col md:flex-row w-full items-center md:items-start bg-green-100 px-8 py-8 rounded-xl">
109109 <div className="flex items-center flex-col p-4 w-full">
110− <h2 className="text-green">200+</h2>
111− <h4 className="text-green text-center pt-2">
110+ <h2 className="text-green-400">200+</h2>
111+ <h4 className="text-green-400 text-center pt-2">
112112 Urbit stars awarded
113113 </h4>
114114 </div>
115− <div className="h-0 w-0 md:h-24 md:w-4 bg-lightGreen self-center" />
115+ <div className="h-0 w-0 md:h-24 md:w-4 bg-green-200 self-center" />
116116 <div className="flex items-center flex-col p-4 w-full">
117− <h2 className="text-green">400+</h2>
118− <h4 className="text-green text-center pt-2">
117+ <h2 className="text-green-400">400+</h2>
118+ <h4 className="text-green-400 text-center pt-2">
119119 Different Contributors
120120 </h4>
121121 </div>
122− <div className="h-0 w-0 md:h-24 md:w-4 bg-lightGreen self-center" />
122+ <div className="h-0 w-0 md:h-24 md:w-4 bg-green-200 self-center" />
123123 <div className="flex items-center flex-col p-4 w-full">
124− <h2 className="text-green">45+</h2>
125− <h4 className="text-green text-center pt-2">Active Projects</h4>
124+ <h2 className="text-green-400">45+</h2>
125+ <h4 className="text-green-400 text-center pt-2">
126+ Active Projects
127+ </h4>
126128 </div>
127129 </div>
128130 <div className="measure py-12">
@@ -133,7 +135,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
133135 </p>
134136 <div className="table">
135137 <Link href="/grants">
136− <a className="button-lg bg-green text-white">View Grants</a>
138+ <a className="button-lg bg-green-400 text-white">View Grants</a>
137139 </Link>
138140 </div>
139141 </div>
@@ -175,7 +177,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
175177 for building on Urbit using the languages you already know.
176178 </p>
177179 <Link href="/docs">
178− <button className="button-lg type-ui text-white bg-ultraDeepWall">
180+ <button className="button-lg type-ui text-white bg-wall-600">
179181 Read the Developer Docs
180182 </button>
181183 </Link>
@@ -203,7 +205,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
203205 />
204206 </div>
205207 <Link href="/blog">
206− <button className="button-lg type-ui text-white bg-green">
208+ <button className="button-lg type-ui text-white bg-green-400">
207209 See More
208210 </button>
209211 </Link>
@@ -232,7 +234,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
232234 />
233235 </div>
234236 <Link href="/events">
235− <button className="button-lg type-ui text-white bg-ultraDeepWall">
237+ <button className="button-lg type-ui text-white bg-wall-600">
236238 More Events
237239 </button>
238240 </Link>
pages/media/[slug].js+5−3
@@ -29,14 +29,16 @@ export default function MediaPage({ post, markdown, search }) {
2929 <Section narrow short>
3030 <h1>{post.title}</h1>
3131 {post.extra.author ? (
32− <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">
32+ <div className="type-ui text-wall-500 mt-4 md:mt-8 lg:mt-10">
3333 {post.extra.author}
3434 </div>
3535 ) : null}
3636 {post.extra.ship ? (
37− <div className="type-ui text-gray font-mono">{post.extra.ship}</div>
37+ <div className="type-ui text-wall-500 font-mono">
38+ {post.extra.ship}
39+ </div>
3840 ) : null}
39− <div className="type-ui text-gray mt-16">
41+ <div className="type-ui text-wall-500 mt-16">
4042 {formatDate(new Date(post.date))}
4143 </div>
4244 </Section>
pages/understanding-urbit/[[...slug]].js+7−7
@@ -49,11 +49,11 @@ const pageTree = (thisLink, tree, level = 0) => {
4949 const isThisPage = router.asPath === thisLink;
5050
5151 const pageItemClasses = classnames({
52− "pl-4 text-black text-base hover:text-green": level === 0,
53− "pl-8 text-black text-base hover:text-green": level === 1,
54− "pl-12 text-black text-base hover:text-green": level === 2,
52+ "pl-4 text-wall-600 text-base hover:text-green-400": level === 0,
53+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
54+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
5555 "dot relative": isThisPage,
56− "text-green": isThisPage,
56+ "text-green-400": isThisPage,
5757 });
5858
5959 return (
@@ -78,10 +78,10 @@ export default function UnderstandingLayout({
7878 const isSelected = "/understanding-urbit".includes(router.asPath);
7979 const selectedClasses = classnames({
8080 dot: isSelected,
81− "text-green": isSelected,
82− "text-black": !isSelected,
81+ "text-green-400": isSelected,
82+ "text-wall-600": !isSelected,
8383 });
84− const rootClasses = "pl-4 text-base hover:text-green";
84+ const rootClasses = "pl-4 text-base hover:text-green-400";
8585 return (
8686 <>
8787 <Head>
pages/updates.js+4−4
@@ -38,21 +38,21 @@ export default function Updates({ posts, search }) {
3838 <h3 className="mt-4">{post.title}</h3>
3939 <div className="flex items-baseline">
4040 {post?.extra.author ? (
41− <div className="type-ui text-gray mt-4">
41+ <div className="type-ui text-wall-500 mt-4">
4242 {post?.extra.author}
4343 </div>
4444 ) : null}
4545 {post?.extra.author && post?.extra.ship ? (
46− <div className="mx-1 text-gray">•</div>
46+ <div className="mx-1 text-wall-500">•</div>
4747 ) : null}
4848 {post?.extra.ship ? (
49− <div className="type-ui text-gray font-mono">
49+ <div className="type-ui text-wall-500 font-mono">
5050 {post.extra.ship}
5151 </div>
5252 ) : null}
5353 </div>
5454
55− <div className="type-ui text-gray mt-2">
55+ <div className="type-ui text-wall-500 mt-2">
5656 {formatDate(new Date(post.date))}
5757 </div>
5858 </div>
pages/updates/[slug].js+3−3
@@ -41,14 +41,14 @@ export default function Post({
4141 <Section short narrow>
4242 <h1>{post.title}</h1>
4343 {post.author ? (
44− <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">
44+ <div className="type-ui text-wall-500 mt-4 md:mt-8 lg:mt-10">
4545 {post.author}
4646 </div>
4747 ) : null}
4848 {post.ship ? (
49− <div className="type-ui text-gray font-mono">{post.ship}</div>
49+ <div className="type-ui text-wall-500 font-mono">{post.ship}</div>
5050 ) : null}
51− <div className="type-ui text-gray mt-4 md:mt-8 lg:mt-10">
51+ <div className="type-ui text-wall-500 mt-4 md:mt-8 lg:mt-10">
5252 {formatDate(new Date(post.date))}
5353 </div>
5454 </Section>
pages/using/[[...slug]].js+8−7
@@ -51,16 +51,17 @@ const pageTree = (thisLink, tree, level = 0) => {
5151 });
5252
5353 const headingItemClasses = classnames({
54− "pl-0 text-gray text-base font-semibold hover:text-green leading-relaxed":
54+ "pl-0 text-wall-500 text-base font-semibold hover:text-green-400 leading-relaxed":
5555 level === 0,
56− "pl-4 text-gray text-base font-semibold hover:text-green": level === 1,
57− "pl-8 text-gray text-base hover:text-green": level === 2,
56+ "pl-4 text-wall-500 text-base font-semibold hover:text-green-400":
57+ level === 1,
58+ "pl-8 text-wall-500 text-base hover:text-green-400": level === 2,
5859 });
5960
6061 const pageItemClasses = classnames({
61− "pl-4 text-black text-base hover:text-green": level === 0,
62− "pl-8 text-black text-base hover:text-green": level === 1,
63− "pl-12 text-black text-base hover:text-green": level === 2,
62+ "pl-4 text-wall-600 text-base hover:text-green-400": level === 0,
63+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
64+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
6465 dot: isThisPage,
6566 });
6667
@@ -76,7 +77,7 @@ const pageTree = (thisLink, tree, level = 0) => {
7677 const isSelected = router.asPath === href;
7778 const selectedClasses = classnames({
7879 dot: isSelected,
79− "text-green": isSelected,
80+ "text-green-400": isSelected,
8081 });
8182 return (
8283 <li>
styles/globals.css+6−5
@@ -9,6 +9,7 @@ html,
99body {
1010 padding: 0;
1111 margin: 0;
12+ @apply text-wall-600;
1213}
1314
1415a {
@@ -18,7 +19,7 @@ a {
1819}
1920
2021p a {
21− @apply text-green;
22+ @apply text-green-400 font-semibold;
2223}
2324
2425button {
@@ -29,7 +30,7 @@ button {
2930
3031h1,
3132.type-h1 {
32− @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight;
33+ @apply text-3xl md:text-4xl lg:text-5xl font-bold leading-tight text-wall-600;
3334}
3435
3536h2,
@@ -69,7 +70,7 @@ p,
6970}
7071
7172code .type-code {
72− @apply bg-wall p-4 font-mono;
73+ @apply bg-wall-100 p-4 font-mono;
7374}
7475
7576/* Utils */
@@ -95,7 +96,7 @@ code .type-code {
9596.bg-img {
9697 background-repeat: no-repeat;
9798 background-position: center center;
98− @apply bg-wall;
99+ @apply bg-wall-100;
99100}
100101
101102.button-sm {
@@ -190,7 +191,7 @@ a:hover {
190191 position: absolute;
191192 left: -0.75rem;
192193 top: 0.4rem;
193− @apply bg-green;
194+ @apply bg-green-400;
194195}
195196
196197.sidebar figure,
styles/markdown.css+7−7
@@ -92,12 +92,12 @@
9292
9393.markdown code,
9494.markdown code[class*="language-"] {
95− @apply px-2 py-0.5 bg-wall rounded-md;
95+ @apply px-2 py-0.5 bg-wall-100 rounded-md;
9696}
9797
9898.markdown a code,
9999.markdown a code[class*="language-"] {
100− @apply bg-washedGreen text-green;
100+ @apply bg-green-100 text-green-400;
101101}
102102
103103.markdown pre code,
@@ -118,11 +118,11 @@
118118.markdown li a,
119119.markdown h3 a,
120120.markdown h2 a {
121− @apply text-green;
121+ @apply text-green-400;
122122}
123123
124124.markdown blockquote {
125− @apply border-l-4 border-deepWall pl-6 italic;
125+ @apply border-l-4 border-wall-500 pl-6 italic;
126126}
127127.markdown blockquote cite {
128128 @apply not-italic font-semibold;
@@ -141,14 +141,14 @@
141141 border-bottom-width: 2px;
142142 border-bottom-style: solid;
143143 padding: 8px !important;
144− @apply border-wall;
144+ @apply border-wall-100;
145145}
146146
147147.markdown table tr th:first-child,
148148.markdown table tr td:first-child {
149149 border-left-width: 2px;
150150 border-left-style: solid;
151− @apply border-wall;
151+ @apply border-wall-100;
152152}
153153
154154.markdown table tr th {
@@ -157,7 +157,7 @@
157157 border-top-style: solid;
158158 text-align: left;
159159 vertical-align: middle;
160− @apply border-wall;
160+ @apply border-wall-100;
161161}
162162
163163/* top-left border-radius */
styles/prism.css+5−5
@@ -8,7 +8,7 @@ https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+ja
88
99code[class*="language-"],
1010pre[class*="language-"] {
11− @apply text-ultraDeepWall;
11+ @apply text-wall-600;
1212 background: none;
1313 font-family: "Source Code Pro", monospace;
1414 font-size: 1em;
@@ -75,7 +75,7 @@ code[class*="language-"] {
7575
7676.token.function-name,
7777.token.function {
78− @apply text-black;
78+ @apply text-wall-600;
7979}
8080
8181.token.selector,
@@ -84,20 +84,20 @@ code[class*="language-"] {
8484.token.char,
8585.token.builtin,
8686.token.inserted {
87− @apply text-green;
87+ @apply text-green-400;
8888}
8989
9090.token.operator,
9191.token.entity,
9292.token.url,
9393.token.variable {
94− @apply text-gray;
94+ @apply text-wall-500;
9595}
9696
9797.token.atrule,
9898.token.attr-value,
9999.token.class-name {
100− @apply text-blue;
100+ @apply text-blue-400;
101101}
102102
103103.token.keyword {
tailwind.config.js+33−16
@@ -3,26 +3,43 @@ module.exports = {
33 darkMode: false, // or 'media' or 'class'
44 theme: {
55 colors: {
6+ // Wall
7+ "wall-100": "#F3F2F0", // Primary
8+ "wall-200": "#E3E0DB",
9+ "wall-300": "#C8C4BD",
10+ "wall-400": "#918C84",
11+ "wall-500": "#5A564F",
12+ "wall-600": "#24221E",
13+ washedWall: "rgba(240, 239, 236, .8)", // for overlays
14+ // Greens (Theme Primary Color)
15+ "green-100": "#E5F7F1",
16+ "green-200": "#BFEBDB",
17+ "green-300": "#80D8B8",
18+ "green-400": "#00B171", // Primary
19+ "green-500": "#006842",
20+ "green-600": "#001F13",
21+ // Yellows
22+ "yellow-100": "#FFFCF1",
23+ "yellow-200": "#FEEBAA",
24+ "yellow-300": "#FCDB63", // Primary
25+ "yellow-400": "#CE9645",
26+ "yellow-500": "#A15A2D",
27+ "yellow-600": "#602010",
28+ // Blues
29+ "blue-100": "#F1F9FF",
30+ "blue-200": "#BAE9FF",
31+ "blue-300": "#7ED8FF",
32+ "blue-400": "#219DFF", // Primary
33+ "blue-500": "#193C90",
34+ "blue-600": "#070821",
35+ // Util
636 black: "#000",
737 white: "#FFF",
8− gray: "rgba(0, 0, 0, 0.6)",
9− lightGray: "rgba(0, 0, 0, 0.2)",
10− wall: "rgba(244, 243, 241, 1)",
11− deepWall: "#E8E4DD",
12− ultraDeepWall: "#32302D",
13− washedWall: "rgba(240, 239, 236, .8)",
14− yellow: "#FCDB63",
15− midYellow: "rgba(255, 199, 0, 0.6)",
16− lightYellow: "rgba(255, 199, 0, 0.3)",
17− washedYellow: "rgba(255, 199, 0, 0.05)",
18− green: "rgba(0, 177, 113, 1)",
19− midGreen: "rgba(0, 159, 101, 0.6)",
20− lightGreen: "rgba(0, 159, 101, 0.3)",
21− washedGreen: "rgba(0, 159, 101, 0.1)",
22− blue: "#219DFF",
38+ transparent: "rgba(0,0,0,0)",
39+ // Syntax highlighting
2340 purple: "rgba(157,82,255,0.8)",
2441 red: "#ff4136",
25− transparent: "rgba(0,0,0,0)",
42+ // White semi-opaques
2643 washedWhite: "rgba(255,255,255, 0.5)",
2744 midWhite: "rgba(255,255,255, 0.8)",
2845 },