git.iko.soy/urbit.org
on master help sign in
use color scales
2fda495Gavin Atkinson
components/Contact.js+8−8
compare with master
unifiedsplit
@@ -53,8 +53,8 @@ export default function Contact({ emphasize }) {
53 </svg>
53 </svg>
54 );
54 );
55
55
56− const linkText = emphasize ? "text-green" : "text-black";
56+ const linkText = emphasize ? "text-green-400" : "text-wall-600";
57− const border = emphasize ? "green" : "black";
57+ const border = emphasize ? "border-green-400" : "border-wall-600";
58
58
59 return (
59 return (
60 <div>
60 <div>
@@ -65,32 +65,32 @@ export default function Contact({ emphasize }) {
65 </h4>
65 </h4>
66 </div>
66 </div>
67 <NewsletterSignup color={border} />
67 <NewsletterSignup color={border} />
68− <h4 className="mt-12 text-gray">
68+ <h4 className="mt-12 text-wall-500">
69 Follow us on{" "}
69 Follow us on{" "}
70 <a className={linkText} href={contact.twitter}>
70 <a className={linkText} href={contact.twitter}>
71 Twitter
71 Twitter
72 </a>
72 </a>
73 </h4>
73 </h4>
74− <h4 className="mt-6 text-gray">
74+ <h4 className="mt-6 text-wall-500">
75 Explore code on{" "}
75 Explore code on{" "}
76 <a className={linkText} href={contact.github}>
76 <a className={linkText} href={contact.github}>
77 Github
77 Github
78 </a>
78 </a>
79 </h4>
79 </h4>
80− <h4 className="mt-6 text-gray">
80+ <h4 className="mt-6 text-wall-500">
81 Ask questions in our{" "}
81 Ask questions in our{" "}
82 <a className={linkText} href={contact.discord}>
82 <a className={linkText} href={contact.discord}>
83 Discord
83 Discord
84 </a>
84 </a>
85 </h4>
85 </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">
87 Boot Urbit and join{" "}
87 Boot Urbit and join{" "}
88 <div className="md:ml-2 rounded-lg flex items-stretch">
88 <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">
90 {contact.urbitCommunity}
90 {contact.urbitCommunity}
91 </code>
91 </code>
92 <button
92 <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"
94 onClick={() => copy()}
94 onClick={() => copy()}
95 >
95 >
96 {buttonIcon}
96 {buttonIcon}
components/ContentArea.js+3−3
@@ -47,16 +47,16 @@ export default function ContentArea(props) {
47 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"
47 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"
48 >
48 >
49 <div className="flex justify-between w-full items-center flex-shrink-0">
49 <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>
51 <div className="hidden md:block">
51 <div className="hidden md:block">
52 <button
52 <button
53 onClick={(e) => {
53 onClick={(e) => {
54 e.stopPropagation();
54 e.stopPropagation();
55 props.search.toggleSearch();
55 props.search.toggleSearch();
56 }}
56 }}
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"
58 >
58 >
59− Search<div className="ml-4 text-lightGray">{shortcut}</div>
59+ Search<div className="ml-4 text-wall-400">{shortcut}</div>
60 </button>
60 </button>
61 </div>
61 </div>
62 </div>
62 </div>
components/EventPreview.js+4−4
@@ -2,15 +2,15 @@ import Link from "next/link";
2
2
3export default function EventPreview({ event, className, title, rsvp }) {
3export default function EventPreview({ event, className, title, rsvp }) {
4 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
4 // 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";
5+ const grayText = event.extra?.dark ? "text-midWhite" : "text-wall-500";
6− const blackText = event.extra?.dark ? "text-white" : "text-black";
6+ const blackText = event.extra?.dark ? "text-white" : "text-wall-600";
7
7
8 return (
8 return (
9 <div className={`cursor-pointer ${className}`}>
9 <div className={`cursor-pointer ${className}`}>
10 {title ? <h3 className="mb-2">{title}</h3> : null}
10 {title ? <h3 className="mb-2">{title}</h3> : null}
11 <div
11 <div
12 key={event.slug}
12 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`}
14 style={{ backgroundImage: `url(${event.extra?.image})` || "" }}
14 style={{ backgroundImage: `url(${event.extra?.image})` || "" }}
15 >
15 >
16 <Link href={`/events/${event.slug}`}>
16 <Link href={`/events/${event.slug}`}>
@@ -26,7 +26,7 @@ export default function EventPreview({ event, className, title, rsvp }) {
26 {rsvp && event.extra.registration_url && event.extra.pinned ? (
26 {rsvp && event.extra.registration_url && event.extra.pinned ? (
27 <div className="absolute right-0 bottom-0 p-4">
27 <div className="absolute right-0 bottom-0 p-4">
28 <a
28 <a
29− className="button-sm bg-green text-white"
29+ className="button-sm bg-green-400 text-white"
30 href={event.extra.registration_url}
30 href={event.extra.registration_url}
31 >
31 >
32 RSVP
32 RSVP
components/Footer.js+28−26
@@ -5,41 +5,43 @@ import { contact } from "../lib/constants";
5
5
6export default function Footer() {
6export default function Footer() {
7 return (
7 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">
9 <SingleColumn>
9 <SingleColumn>
10 <Section short className="flex flex-row flex-wrap">
10 <Section short className="flex flex-row flex-wrap">
11 <div className="w-1/2 md:w-1/3 flex flex-col flex-shrink">
11 <div className="w-1/2 md:w-1/3 flex flex-col flex-shrink">
12 <h4 className="mt-16 mb-8">Use Urbit</h4>
12 <h4 className="mt-16 mb-8">Use Urbit</h4>
13 <Link href="/getting-started">
13 <Link href="/getting-started">
14 <div>
14 <div>
15− <a className="type-bold text-gray">Getting Started</a>
15+ <a className="type-bold text-wall-500">Getting Started</a>
16 </div>
16 </div>
17 </Link>
17 </Link>
18 <Link href="/using">
18 <Link href="/using">
19 <div>
19 <div>
20− <a className="type-bold text-gray">Operator's Manual</a>
20+ <a className="type-bold text-wall-500">Operator's Manual</a>
21 </div>
21 </div>
22 </Link>
22 </Link>
23 <Link href="https://github.com/urbit/port/releases">
23 <Link href="https://github.com/urbit/port/releases">
24 <div>
24 <div>
25− <a className="type-bold text-gray">Urbit Client</a>
25+ <a className="type-bold text-wall-500">Urbit Client</a>
26 </div>
26 </div>
27 </Link>
27 </Link>
28 <Link href="https://github.com/urbit/urbit/releases">
28 <Link href="https://github.com/urbit/urbit/releases">
29 <div>
29 <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>
31 </div>
31 </div>
32 </Link>
32 </Link>
33 {
33 {
34 // <Link href="">
34 // <Link href="">
35 // <div>
35 // <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>
37 // </div>
37 // </div>
38 // </Link>
38 // </Link>
39 }
39 }
40 <Link href="/getting-started/planet/#hosting-providers">
40 <Link href="/getting-started/planet/#hosting-providers">
41 <div>
41 <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>
43 </div>
45 </div>
44 </Link>
46 </Link>
45 </div>
47 </div>
@@ -47,22 +49,22 @@ export default function Footer() {
47 <h4 className="mt-16 mb-8">About</h4>
49 <h4 className="mt-16 mb-8">About</h4>
48 <Link href="/understanding-urbit">
50 <Link href="/understanding-urbit">
49 <div>
51 <div>
50− <a className="type-bold text-gray">What's Urbit?</a>
52+ <a className="type-bold text-wall-500">What's Urbit?</a>
51 </div>
53 </div>
52 </Link>
54 </Link>
53 <Link href="/understanding-urbit/urbit-id">
55 <Link href="/understanding-urbit/urbit-id">
54 <div>
56 <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>
56 </div>
58 </div>
57 </Link>
59 </Link>
58 <Link href="/understanding-urbit/urbit-os">
60 <Link href="/understanding-urbit/urbit-os">
59 <div>
61 <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>
61 </div>
63 </div>
62 </Link>
64 </Link>
63 <Link href="/faq">
65 <Link href="/faq">
64 <div>
66 <div>
65− <a className="mt-2 type-bold text-gray">FAQ</a>
67+ <a className="mt-2 type-bold text-wall-500">FAQ</a>
66 </div>
68 </div>
67 </Link>
69 </Link>
68 </div>
70 </div>
@@ -70,17 +72,17 @@ export default function Footer() {
70 <h4 className="mt-16 mb-8">News</h4>
72 <h4 className="mt-16 mb-8">News</h4>
71 <Link href="/blog">
73 <Link href="/blog">
72 <div>
74 <div>
73− <a className="type-bold text-gray">Blog</a>
75+ <a className="type-bold text-wall-500">Blog</a>
74 </div>
76 </div>
75 </Link>
77 </Link>
76 <Link href="/events">
78 <Link href="/events">
77 <div>
79 <div>
78− <a className="mt-2 type-bold text-gray">Events</a>
80+ <a className="mt-2 type-bold text-wall-500">Events</a>
79 </div>
81 </div>
80 </Link>
82 </Link>
81 <Link href="/updates">
83 <Link href="/updates">
82 <div>
84 <div>
83− <a className="mt-2 type-bold text-gray">Updates</a>
85+ <a className="mt-2 type-bold text-wall-500">Updates</a>
84 </div>
86 </div>
85 </Link>
87 </Link>
86 </div>
88 </div>
@@ -89,17 +91,17 @@ export default function Footer() {
89 <h4 className="mt-16 mb-8">Develop</h4>
91 <h4 className="mt-16 mb-8">Develop</h4>
90 <Link href="/docs">
92 <Link href="/docs">
91 <div>
93 <div>
92− <a className="type-bold text-gray">Documentation</a>
94+ <a className="type-bold text-wall-500">Documentation</a>
93 </div>
95 </div>
94 </Link>
96 </Link>
95 <Link href="https://github.com/urbit">
97 <Link href="https://github.com/urbit">
96 <div>
98 <div>
97− <a className="mt-2 type-bold text-gray">Github</a>
99+ <a className="mt-2 type-bold text-wall-500">Github</a>
98 </div>
100 </div>
99 </Link>
101 </Link>
100 <Link href="https://github.com/urbit/awesome-urbit#http-apis-airlock">
102 <Link href="https://github.com/urbit/awesome-urbit#http-apis-airlock">
101 <div>
103 <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>
103 </div>
105 </div>
104 </Link>
106 </Link>
105 </div>
107 </div>
@@ -107,12 +109,12 @@ export default function Footer() {
107 <h4 className="mt-16 mb-8">Contribute</h4>
109 <h4 className="mt-16 mb-8">Contribute</h4>
108 <Link href="https://github.com/urbit/urbit/issues">
110 <Link href="https://github.com/urbit/urbit/issues">
109 <div>
111 <div>
110− <a className="type-bold text-gray">Issue Tracker</a>
112+ <a className="type-bold text-wall-500">Issue Tracker</a>
111 </div>
113 </div>
112 </Link>
114 </Link>
113 <Link href="/grants">
115 <Link href="/grants">
114 <div>
116 <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>
116 </div>
118 </div>
117 </Link>
119 </Link>
118 </div>
120 </div>
@@ -121,22 +123,22 @@ export default function Footer() {
121 <h4 className="mt-16 mb-8">Community</h4>
123 <h4 className="mt-16 mb-8">Community</h4>
122 <Link href="https://groups.google.com/a/urbit.org/g/dev?pli=1">
124 <Link href="https://groups.google.com/a/urbit.org/g/dev?pli=1">
123 <div>
125 <div>
124− <a className="type-bold text-gray">Dev Mailing List</a>
126+ <a className="type-bold text-wall-500">Dev Mailing List</a>
125 </div>
127 </div>
126 </Link>
128 </Link>
127 <Link href="https://discord.gg/CfSKKaB2ep">
129 <Link href="https://discord.gg/CfSKKaB2ep">
128 <div>
130 <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>
130 </div>
132 </div>
131 </Link>
133 </Link>
132 <Link href="https://github.com/urbit/azimuth">
134 <Link href="https://github.com/urbit/azimuth">
133 <div>
135 <div>
134− <a className="mt-2 type-bold text-gray">Governance</a>
136+ <a className="mt-2 type-bold text-wall-500">Governance</a>
135 </div>
137 </div>
136 </Link>
138 </Link>
137 <Link href="https://twitter.com/urbit">
139 <Link href="https://twitter.com/urbit">
138 <div>
140 <div>
139− <a className="mt-2 type-bold text-gray">Twitter</a>
141+ <a className="mt-2 type-bold text-wall-500">Twitter</a>
140 </div>
142 </div>
141 </Link>
143 </Link>
142 </div>
144 </div>
@@ -145,14 +147,14 @@ export default function Footer() {
145 <div className="md:w-1/3">
147 <div className="md:w-1/3">
146 <Link href="/privacy">
148 <Link href="/privacy">
147 <div>
149 <div>
148− <a className="type-bold text-gray">Privacy Policy</a>
150+ <a className="type-bold text-wall-500">Privacy Policy</a>
149 </div>
151 </div>
150 </Link>
152 </Link>
151 </div>
153 </div>
152 <div className="md:w-1/3">
154 <div className="md:w-1/3">
153 <Link href="/terms-of-service">
155 <Link href="/terms-of-service">
154 <div>
156 <div>
155− <a className="type-bold text-gray">Terms of Service</a>
157+ <a className="type-bold text-wall-500">Terms of Service</a>
156 </div>
158 </div>
157 </Link>
159 </Link>
158 </div>
160 </div>
@@ -160,7 +162,7 @@ export default function Footer() {
160 <div>
162 <div>
161 <a
163 <a
162 href={"mailto:" + contact.email}
164 href={"mailto:" + contact.email}
163− className="type-bold text-gray"
165+ className="type-bold text-wall-500"
164 >
166 >
165 {contact.email}
167 {contact.email}
166 </a>
168 </a>
components/GrantPreview.js+9−9
@@ -8,14 +8,14 @@ export default function GrantPreview({ grant }) {
8
8
9 const className = classnames({
9 const className = classnames({
10 "bg-lightBlue": type.includes("Proposal") && isOpen,
10 "bg-lightBlue": type.includes("Proposal") && isOpen,
11− "bg-lightGreen": type.includes("Apprenticeship") && isOpen,
11+ "bg-green-200": type.includes("Apprenticeship") && isOpen,
12− "bg-lightYellow": type.includes("Bounty") && isOpen,
12+ "bg-yellow-100": type.includes("Bounty") && isOpen,
13 });
13 });
14
14
15 return (
15 return (
16 <div
16 <div
17 key={grant.slug}
17 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}`}
19 >
19 >
20 <Link href={`/grants/${grant.slug}`}>
20 <Link href={`/grants/${grant.slug}`}>
21 <div className="p-8">
21 <div className="p-8">
@@ -23,13 +23,13 @@ export default function GrantPreview({ grant }) {
23 <h3 className="type-ui" id={grant.slug}>
23 <h3 className="type-ui" id={grant.slug}>
24 {grant.title}
24 {grant.title}
25 </h3>
25 </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`}>
27 {!isCompleted ? (isOpen ? "Open" : "In Progress") : "Completed"}
27 {!isCompleted ? (isOpen ? "Open" : "In Progress") : "Completed"}
28 </div>
28 </div>
29 </div>
29 </div>
30 <p className="mb-4">{grant.extra.description}</p>
30 <p className="mb-4">{grant.extra.description}</p>
31 <div className="flex w-full flex-col md:flex-row md:items-center justify-between">
31 <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">
33 <strong>Reward: </strong>
33 <strong>Reward: </strong>
34 {grant.extra.reward} star
34 {grant.extra.reward} star
35 {grant.extra.reward === 1 ? "" : "s"}
35 {grant.extra.reward === 1 ? "" : "s"}
@@ -37,9 +37,9 @@ export default function GrantPreview({ grant }) {
37 <div className="flex items-center flex-wrap md:mt-0 mt-4">
37 <div className="flex items-center flex-wrap md:mt-0 mt-4">
38 {grant.taxonomies.grant_type.map((category) => {
38 {grant.taxonomies.grant_type.map((category) => {
39 const className = classnames({
39 const className = classnames({
40− "bg-blue text-white": category === "Proposal",
40+ "bg-blue-400 text-white": category === "Proposal",
41− "bg-green text-white": category === "Apprenticeship",
41+ "bg-green-400 text-white": category === "Apprenticeship",
42− "bg-yellow": category === "Bounty",
42+ "bg-yellow-300": category === "Bounty",
43 });
43 });
44 return (
44 return (
45 <div className={`${className} badge-sm mr-1 my-1`}>
45 <div className={`${className} badge-sm mr-1 my-1`}>
@@ -48,7 +48,7 @@ export default function GrantPreview({ grant }) {
48 );
48 );
49 })}
49 })}
50 {grant.taxonomies.grant_category.map((category) => (
50 {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">
52 {category}
52 {category}
53 </div>
53 </div>
54 ))}
54 ))}
components/Header.js+6−6
@@ -11,8 +11,8 @@ function ActiveLink({ children, href, className, currentPath }) {
11 const firstCrumb = currentPath.split("/")[1];
11 const firstCrumb = currentPath.split("/")[1];
12
12
13 const activeClassName = classnames({
13 const activeClassName = classnames({
14− "text-black": "/" + firstCrumb === href,
14+ "text-wall-600": "/" + firstCrumb === href,
15− "text-gray": "/" + firstCrumb !== href,
15+ "text-wall-500": "/" + firstCrumb !== href,
16 });
16 });
17
17
18 return (
18 return (
@@ -55,7 +55,7 @@ export default function Header(props) {
55 </Link>
55 </Link>
56 {routeDepth > 2 ? (
56 {routeDepth > 2 ? (
57 <Link href={`/${firstCrumb}`}>
57 <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">
59 {capitalize(firstCrumb)}
59 {capitalize(firstCrumb)}
60 </a>
60 </a>
61 </Link>
61 </Link>
@@ -88,7 +88,7 @@ export default function Header(props) {
88 </ActiveLink>
88 </ActiveLink>
89 <ActiveLink
89 <ActiveLink
90 currentPath={currentPath}
90 currentPath={currentPath}
91− className="mr-5 text-green type-ui button-text"
91+ className="mr-5 text-green-400 type-ui button-text"
92 href="/getting-started"
92 href="/getting-started"
93 >
93 >
94 Get Started
94 Get Started
@@ -98,10 +98,10 @@ export default function Header(props) {
98 e.stopPropagation();
98 e.stopPropagation();
99 props.search.toggleSearch(e);
99 props.search.toggleSearch(e);
100 }}
100 }}
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"
102 >
102 >
103 <div>Search</div>
103 <div>Search</div>
104− <div className="ml-4 text-lightGray">{shortcut}</div>
104+ <div className="ml-4 text-wall-400">{shortcut}</div>
105 </button>
105 </button>
106 </nav>
106 </nav>
107
107
components/MenuTray.js+3−3
@@ -44,7 +44,7 @@ export default function MenuTray({ isOpen, setTray, search, children }) {
44 className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
44 className={`bg-washedWhite w-screen h-screen ${overlayClasses}`}
45 />
45 />
46 <div
46 <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}`}
48 >
48 >
49 <div
49 <div
50 {...handlers}
50 {...handlers}
@@ -59,7 +59,7 @@ export default function MenuTray({ isOpen, setTray, search, children }) {
59 e.stopPropagation();
59 e.stopPropagation();
60 search.toggleSearch(e);
60 search.toggleSearch(e);
61 }}
61 }}
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 ${
63 isOpen ? "flex" : "hidden"
63 isOpen ? "flex" : "hidden"
64 }`}
64 }`}
65 >
65 >
@@ -68,7 +68,7 @@ export default function MenuTray({ isOpen, setTray, search, children }) {
68 </nav>
68 </nav>
69 <button
69 <button
70 onClick={() => setTray(!isOpen)}
70 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"
72 >
72 >
73 {isOpen ? (
73 {isOpen ? (
74 <svg
74 <svg
components/NewletterSignup.js+2−2
@@ -12,7 +12,7 @@ export default function NewsletterSignup(props) {
12 <div className="input-group" id="mc_embed_signup_scroll">
12 <div className="input-group" id="mc_embed_signup_scroll">
13 <div className="mc-field-group w-full relative">
13 <div className="mc-field-group w-full relative">
14 <input
14 <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-${
16 props.color || "black"
16 props.color || "black"
17 } border-4 px-3 w-full mb-2 h-16 rounded-xl`}
17 } border-4 px-3 w-full mb-2 h-16 rounded-xl`}
18 type="email"
18 type="email"
@@ -23,7 +23,7 @@ export default function NewsletterSignup(props) {
23 <div className="flex h-16 items-center justify-center absolute top-0 right-6">
23 <div className="flex h-16 items-center justify-center absolute top-0 right-6">
24 <button
24 <button
25 id="mc-embedded-subscribe"
25 id="mc-embedded-subscribe"
26− className="type-ui text-gray bg-transparent"
26+ className="type-ui text-wall-500 bg-transparent"
27 type="submit"
27 type="submit"
28 name="subscribe"
28 name="subscribe"
29 >
29 >
components/Pagination.js+2−2
@@ -8,11 +8,11 @@ export default function Pagination(props) {
8 key={`post-${props.post.slug}`}
8 key={`post-${props.post.slug}`}
9 >
9 >
10 <div
10 <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"
12 style={{ maxWidth: "45%" }}
12 style={{ maxWidth: "45%" }}
13 >
13 >
14 <p className="flex-shrink-0 pr-1">{props.previous ? "<- " : ""}</p>
14 <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>
16 <p className="flex-shrink-0 pl-1">{props.next ? " ->" : ""}</p>
16 <p className="flex-shrink-0 pl-1">{props.next ? " ->" : ""}</p>
17 </div>
17 </div>
18 </Link>
18 </Link>
components/PostPreview.js+2−2
@@ -26,12 +26,12 @@ export default function PostPreview(props) {
26 </div>
26 </div>
27 ) : null}
27 ) : null}
28 {props.post.extra.ship ? (
28 {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">
30 {props.post.extra.ship}
30 {props.post.extra.ship}
31 </div>
31 </div>
32 ) : null}
32 ) : null}
33 </div>
33 </div>
34− <div className="text-gray type-sub mt-1">
34+ <div className="text-wall-500 type-sub mt-1">
35 {formatDate(new Date(props.post.date))}
35 {formatDate(new Date(props.post.date))}
36 </div>
36 </div>
37 </div>
37 </div>
components/Search.js+10−8
@@ -96,7 +96,7 @@ class Search extends Component {
96 >
96 >
97 <input
97 <input
98 autoFocus
98 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"
100 placeholder="Search..."
100 placeholder="Search..."
101 type="text"
101 type="text"
102 onClick={(e) => e.stopPropagation()}
102 onClick={(e) => e.stopPropagation()}
@@ -119,7 +119,7 @@ class Search extends Component {
119 return (
119 return (
120 <li
120 <li
121 className={`cursor-pointer flex text-left w-full ${
121 className={`cursor-pointer flex text-left w-full ${
122− selected ? "bg-green" : ""
122+ selected ? "bg-green-400" : ""
123 }`}
123 }`}
124 {...getItemProps({
124 {...getItemProps({
125 key: item.content.slug + "-" + index,
125 key: item.content.slug + "-" + index,
@@ -131,13 +131,15 @@ class Search extends Component {
131 <div className="font-semibold p-3">
131 <div className="font-semibold p-3">
132 <p
132 <p
133 className={`text-base ${
133 className={`text-base ${
134− selected ? "text-white" : "text-black"
134+ selected ? "text-white" : "text-wall-600"
135 }`}
135 }`}
136 >
136 >
137 {item.content.symbol.length > 0 && (
137 {item.content.symbol.length > 0 && (
138 <code
138 <code
139 className={`mr-1 rounded px-1 py-0.5 ${
139 className={`mr-1 rounded px-1 py-0.5 ${
140+ selected
140− selected ? "bg-washedWhite" : "bg-wall"
141+ ? "bg-washedWhite"
142+ : "bg-wall-100"
141 }`}
143 }`}
142 >
144 >
143 {item.content.symbol}
145 {item.content.symbol}
@@ -147,7 +149,7 @@ class Search extends Component {
147 </p>
149 </p>
148 <p
150 <p
149 className={`font-normal text-base mt-1 ${
151 className={`font-normal text-base mt-1 ${
150− selected ? "text-white" : "text-black"
152+ selected ? "text-white" : "text-wall-600"
151 }`}
153 }`}
152 >
154 >
153 {item.content.desc}
155 {item.content.desc}
@@ -160,7 +162,7 @@ class Search extends Component {
160 return (
162 return (
161 <li
163 <li
162 className={`cursor-pointer flex text-left w-full ${
164 className={`cursor-pointer flex text-left w-full ${
163− selected ? "bg-green" : ""
165+ selected ? "bg-green-400" : ""
164 }`}
166 }`}
165 {...getItemProps({
167 {...getItemProps({
166 key: item.content.link + "-" + index,
168 key: item.content.link + "-" + index,
@@ -172,7 +174,7 @@ class Search extends Component {
172 <div className="p-3">
174 <div className="p-3">
173 <p
175 <p
174 className={`font-medium text-base ${
176 className={`font-medium text-base ${
175− selected ? "text-white" : "text-black"
177+ selected ? "text-white" : "text-wall-600"
176 }`}
178 }`}
177 >
179 >
178 {item.content.parent !== "Content"
180 {item.content.parent !== "Content"
@@ -182,7 +184,7 @@ class Search extends Component {
182 </p>
184 </p>
183 <p
185 <p
184 className={`text-base font-regular text-small ${
186 className={`text-base font-regular text-small ${
185− selected ? "text-midWhite" : "text-gray"
187+ selected ? "text-midWhite" : "text-wall-500"
186 }`}
188 }`}
187 >
189 >
188 {item.content.content}
190 {item.content.content}
components/Sidebar.js+3−3
@@ -6,10 +6,10 @@ export default function Sidebar(props) {
6 const [isOpen, setTray] = useState(false);
6 const [isOpen, setTray] = useState(false);
7 return (
7 return (
8 <>
8 <>
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">
10 <header className="flex flex-shrink-0 justify-between items-center pl-6 pt-12 mt-5 pb-8">
10 <header className="flex flex-shrink-0 justify-between items-center pl-6 pt-12 mt-5 pb-8">
11 <Link href="/">
11 <Link href="/">
12− <a className="type-ui text-gray">Urbit</a>
12+ <a className="type-ui text-wall-500">Urbit</a>
13 </Link>
13 </Link>
14 </header>
14 </header>
15 <div className="overflow-y-auto p-6 pt-16">
15 <div className="overflow-y-auto p-6 pt-16">
@@ -21,7 +21,7 @@ export default function Sidebar(props) {
21 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
21 <MenuTray isOpen={isOpen} setTray={setTray} search={props.search}>
22 <header className="flex flex-shrink-0 justify-between items-center pb-8">
22 <header className="flex flex-shrink-0 justify-between items-center pb-8">
23 <Link href="/">
23 <Link href="/">
24− <a className="type-ui text-gray">Urbit</a>
24+ <a className="type-ui text-wall-500">Urbit</a>
25 </Link>
25 </Link>
26 </header>
26 </header>
27 {props.children}
27 {props.children}
components/TableOfContents.js+3−1
@@ -62,7 +62,9 @@ const Headings = ({ headings, activeId }) => (
62 {heading.items.map((child) => (
62 {heading.items.map((child) => (
63 <li
63 <li
64 key={child.id}
64 key={child.id}
65+ className={
65− className={child.id === activeId ? "text-green" : "text-gray"}
66+ child.id === activeId ? "text-green-400" : "text-wall-500"
67+ }
66 >
68 >
67 <a href={`#${child.id}`}>{child.title}</a>
69 <a href={`#${child.id}`}>{child.title}</a>
68 </li>
70 </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
19 <label for="port-macos">MacOS</label>
19 <label for="port-macos">MacOS</label>
20 <div class="tab">
20 <div class="tab">
21 <p>To install <strong>Port</strong> on MacOS simply download and open the <code>.dmg</code> file.</p>
21 <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;">
23 Download Port
23 Download Port
24 </a>
24 </a>
25 </div>
25 </div>
pages/blog.js+2−2
@@ -60,12 +60,12 @@ export default function Blog({ posts, search }) {
60 </div>
60 </div>
61 ) : null}
61 ) : null}
62 {post.extra.ship ? (
62 {post.extra.ship ? (
63− <div className="type-sub-bold text-gray font-mono">
63+ <div className="type-sub-bold text-wall-500 font-mono">
64 {post.extra.ship}
64 {post.extra.ship}
65 </div>
65 </div>
66 ) : null}
66 ) : null}
67 </div>
67 </div>
68− <div className="text-gray type-sub">
68+ <div className="text-wall-500 type-sub">
69 {formatDate(new Date(post.date))}
69 {formatDate(new Date(post.date))}
70 </div>
70 </div>
71 </div>
71 </div>
pages/blog/[slug].js+2−2
@@ -46,12 +46,12 @@ export default function Post({
46 <div className="type-sub-bold mr-2">{post.extra.author}</div>
46 <div className="type-sub-bold mr-2">{post.extra.author}</div>
47 ) : null}
47 ) : null}
48 {post.extra.ship ? (
48 {post.extra.ship ? (
49− <div className="type-sub-bold text-gray font-mono">
49+ <div className="type-sub-bold text-wall-500 font-mono">
50 {post.extra.ship}
50 {post.extra.ship}
51 </div>
51 </div>
52 ) : null}
52 ) : null}
53 </div>
53 </div>
54− <div className="text-gray type-sub">
54+ <div className="text-wall-500 type-sub">
55 {formatDate(new Date(post.date))}
55 {formatDate(new Date(post.date))}
56 </div>
56 </div>
57 </Section>
57 </Section>
pages/community/[[...slug]].js+4−4
@@ -43,11 +43,11 @@ const pageTree = (thisLink, tree, level = 0) => {
43 const isThisPage = router.asPath === thisLink;
43 const isThisPage = router.asPath === thisLink;
44
44
45 const pageItemClasses = classnames({
45 const pageItemClasses = classnames({
46− "pl-4 text-black text-base hover:text-green": level === 0,
46+ "pl-4 text-wall-600 text-base hover:text-green-400": level === 0,
47− "pl-8 text-black text-base hover:text-green": level === 1,
47+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
48− "pl-12 text-black text-base hover:text-green": level === 2,
48+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
49 "dot relative": isThisPage,
49 "dot relative": isThisPage,
50− "text-green": isThisPage,
50+ "text-green-400": isThisPage,
51 });
51 });
52
52
53 return (
53 return (
pages/docs/[[...slug]].js+11−10
@@ -57,16 +57,17 @@ const pageTree = (thisLink, tree, level = 0) => {
57 });
57 });
58
58
59 const headingItemClasses = classnames({
59 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":
61 level === 0,
61 level === 0,
62− "pl-4 text-black text-base font-semibold hover:text-green": level === 1,
62+ "pl-4 text-wall-600 text-base font-semibold hover:text-green-400":
63+ level === 1,
63− "pl-8 text-black text-base hover:text-green": level === 2,
64+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 2,
64 });
65 });
65
66
66 const pageItemClasses = classnames({
67 const pageItemClasses = classnames({
67− "pl-4 text-black text-base hover:text-green": level === 0,
68+ "pl-4 text-wall-600 text-base hover:text-green-400": level === 0,
68− "pl-8 text-black text-base hover:text-green": level === 1,
69+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
69− "pl-12 text-black text-base hover:text-green": level === 2,
70+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
70 });
71 });
71
72
72 return (
73 return (
@@ -81,7 +82,7 @@ const pageTree = (thisLink, tree, level = 0) => {
81 const isSelected = router.asPath === href;
82 const isSelected = router.asPath === href;
82 const selectedClasses = classnames({
83 const selectedClasses = classnames({
83 dot: isSelected,
84 dot: isSelected,
84− "text-green": isSelected,
85+ "text-green-400": isSelected,
85 });
86 });
86 return (
87 return (
87 <li>
88 <li>
@@ -116,10 +117,10 @@ export default function DocsLayout({
116 const isSelected = "/docs".includes(router.asPath);
117 const isSelected = "/docs".includes(router.asPath);
117 const selectedClasses = classnames({
118 const selectedClasses = classnames({
118 dot: isSelected,
119 dot: isSelected,
119− "text-green": isSelected,
120+ "text-green-400": isSelected,
120− "text-black": !isSelected,
121+ "text-wall-600": !isSelected,
121 });
122 });
122− const rootClasses = "pl-0 text-base hover:text-green";
123+ const rootClasses = "pl-0 text-base hover:text-green-400";
123 return (
124 return (
124 <>
125 <>
125 <Head>
126 <Head>
pages/events.js+5−5
@@ -11,13 +11,13 @@ import { contact } from "../lib/constants";
11
11
12export function EventCard({ event, dir, className }) {
12export function EventCard({ event, dir, className }) {
13 // Event tiles have a 'dark mode' used when their background images are dark and white text is needed for legibility.
13 // 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";
14+ const grayText = event.extra?.dark ? "text-midWhite" : "text-wall-500";
15− const blackText = event.extra?.dark ? "text-white" : "text-black";
15+ const blackText = event.extra?.dark ? "text-white" : "text-wall-600";
16
16
17 return (
17 return (
18 <div
18 <div
19 key={event.slug}
19 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}`}
21 style={{
21 style={{
22 backgroundImage:
22 backgroundImage:
23 `${
23 `${
@@ -94,7 +94,7 @@ export default function Events({ pastEvents, comingSoon, search }) {
94 {comingSoon.length > 0 ? (
94 {comingSoon.length > 0 ? (
95 <>
95 <>
96 <div className="mb-8 table">
96 <div className="mb-8 table">
97− <h3 className="text-gray">Coming Soon</h3>
97+ <h3 className="text-wall-500">Coming Soon</h3>
98 </div>
98 </div>
99 {comingSoon.map((post) => {
99 {comingSoon.map((post) => {
100 return <EventCard event={post} />;
100 return <EventCard event={post} />;
@@ -102,7 +102,7 @@ export default function Events({ pastEvents, comingSoon, search }) {
102 </>
102 </>
103 ) : null}
103 ) : null}
104 <div className="mb-8 table">
104 <div className="mb-8 table">
105− <h3 className="text-gray">Past Events</h3>
105+ <h3 className="text-wall-500">Past Events</h3>
106 </div>
106 </div>
107 {pastEvents.map((post) => {
107 {pastEvents.map((post) => {
108 return <EventCard event={post} />;
108 return <EventCard event={post} />;
pages/events/[slug].js+6−4
@@ -38,21 +38,23 @@ export default function Event({
38 <h1>{post.title}</h1>
38 <h1>{post.title}</h1>
39
39
40 {post.extra.author ? (
40 {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">
42 {post.extra.author}
42 {post.extra.author}
43 </div>
43 </div>
44 ) : null}
44 ) : null}
45 {post.extra.ship ? (
45 {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>
47 ) : null}
49 ) : null}
48
50
49 <div className="mt-16">
51 <div className="mt-16">
50− <p className="type-ui text-gray">
52+ <p className="type-ui text-wall-500">
51 {formatDate(new Date(post.date))} {", " + post.extra.time}
53 {formatDate(new Date(post.date))} {", " + post.extra.time}
52 </p>
54 </p>
53 {post.extra.registration_url && post.extra.pinned ? (
55 {post.extra.registration_url && post.extra.pinned ? (
54 <a
56 <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"
56 href={post.extra.registration_url}
58 href={post.extra.registration_url}
57 >
59 >
58 RSVP
60 RSVP
pages/getting-started/[[...slug]].js+8−7
@@ -43,11 +43,12 @@ const pageTree = (thisLink, tree, level = 0) => {
43 const isThisPage = router.asPath === thisLink;
43 const isThisPage = router.asPath === thisLink;
44
44
45 const pageItemClasses = classnames({
45 const pageItemClasses = classnames({
46− "pl-0 font-semibold text-gray text-base hover:text-green": level === 0,
46+ "pl-0 font-semibold text-wall-500 text-base hover:text-green-400":
47+ level === 0,
47− "pl-8 text-black text-base hover:text-green": level === 1,
48+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
48− "pl-12 text-black text-base hover:text-green": level === 2,
49+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
49 "dot relative": isThisPage,
50 "dot relative": isThisPage,
50− "text-green": isThisPage,
51+ "text-green-400": isThisPage,
51 });
52 });
52
53
53 return (
54 return (
@@ -64,10 +65,10 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
64 const isSelected = "/getting-started".includes(router.asPath);
65 const isSelected = "/getting-started".includes(router.asPath);
65 const selectedClasses = classnames({
66 const selectedClasses = classnames({
66 dot: isSelected,
67 dot: isSelected,
67− "text-green": isSelected,
68+ "text-green-400": isSelected,
68− "text-gray": !isSelected,
69+ "text-wall-500": !isSelected,
69 });
70 });
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";
71
72
72 return (
73 return (
73 <>
74 <>
pages/grants.js+17−16
@@ -157,17 +157,17 @@ export default function Grants({
157 </div>
157 </div>
158 <div className="flex flex-wrap">
158 <div className="flex flex-wrap">
159 <Link href="#find-a-grant">
159 <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">
161 View Grants
161 View Grants
162 </button>
162 </button>
163 </Link>
163 </Link>
164 <Link href="#proposals">
164 <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">
166 Submit a Proposal
166 Submit a Proposal
167 </button>
167 </button>
168 </Link>
168 </Link>
169 <Link href="#gifts">
169 <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">
171 Recent Gifts
171 Recent Gifts
172 </a>
172 </a>
173 </Link>
173 </Link>
@@ -190,9 +190,9 @@ export default function Grants({
190 {featuredGrants.map((grant) => {
190 {featuredGrants.map((grant) => {
191 return (
191 return (
192 <Link href={"/grants/" + grant.slug}>
192 <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">
194 <h4 className="pb-4">{grant.title}</h4>
194 <h4 className="pb-4">{grant.title}</h4>
195− <p className="text-green pb-4">
195+ <p className="text-green-400 pb-4">
196 {grant.extra.reward} star
196 {grant.extra.reward} star
197 {grant.extra.reward === 1 ? "" : "s"}{" "}
197 {grant.extra.reward === 1 ? "" : "s"}{" "}
198 {grant.extra.completed ? "awarded" : "pending"}
198 {grant.extra.completed ? "awarded" : "pending"}
@@ -223,7 +223,7 @@ export default function Grants({
223
223
224 <Link href="#find-a-grant">
224 <Link href="#find-a-grant">
225 <button
225 <button
226− className="button-lg bg-blue text-white mr-2"
226+ className="button-lg bg-blue-400 text-white mr-2"
227 onClick={() => {
227 onClick={() => {
228 setIncludeInProgress(true);
228 setIncludeInProgress(true);
229 setIncludeCompleted(true);
229 setIncludeCompleted(true);
@@ -247,7 +247,7 @@ export default function Grants({
247 {/* Uncomment once people added to content/gifts folder. */}
247 {/* Uncomment once people added to content/gifts folder. */}
248 {/* {gifts.map((e) => {
248 {/* {gifts.map((e) => {
249 return (
249 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">
251 <p className="font-semibold">
251 <p className="font-semibold">
252 {e.name}
252 {e.name}
253 </p>
253 </p>
@@ -278,7 +278,7 @@ export default function Grants({
278 <h2 id="find-a-grant" className="pb-8">
278 <h2 id="find-a-grant" className="pb-8">
279 Find a Grant
279 Find a Grant
280 </h2>
280 </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>
282 <div className="flex flex-wrap items-center pb-2">
282 <div className="flex flex-wrap items-center pb-2">
283 <button
283 <button
284 onClick={() => {
284 onClick={() => {
@@ -286,18 +286,19 @@ export default function Grants({
286 setTypes(types);
286 setTypes(types);
287 }}
287 }}
288 className={`badge-lg my-2 mr-2 ${
288 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"
290 }`}
290 }`}
291 >
291 >
292 All <div className="opacity-50 ml-2">{allCount}</div>
292 All <div className="opacity-50 ml-2">{allCount}</div>
293 </button>
293 </button>
294 {types.map((type, index) => {
294 {types.map((type, index) => {
295 const className = classnames({
295 const className = classnames({
296+ "bg-blue-400 text-white":
296− "bg-blue text-white": tab === index + 1 && type === "Proposal",
297+ tab === index + 1 && type === "Proposal",
297− "bg-green text-white":
298+ "bg-green-400 text-white":
298 tab === index + 1 && type === "Apprenticeship",
299 tab === index + 1 && type === "Apprenticeship",
299− "bg-yellow": tab === index + 1 && type === "Bounty",
300+ "bg-yellow-300": tab === index + 1 && type === "Bounty",
300− "bg-wall text-gray": tab !== index + 1,
301+ "bg-wall-100 text-wall-500": tab !== index + 1,
301 });
302 });
302 return (
303 return (
303 <button
304 <button
@@ -313,13 +314,13 @@ export default function Grants({
313 );
314 );
314 })}
315 })}
315 </div>
316 </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>
317 <div className="flex flex-wrap mb-12">
318 <div className="flex flex-wrap mb-12">
318 {categories.map((category) => {
319 {categories.map((category) => {
319 const isActive = activeTags.includes(category);
320 const isActive = activeTags.includes(category);
320 const activeClasses = classnames({
321 const activeClasses = classnames({
321− "bg-green text-white": isActive,
322+ "bg-green-400 text-white": isActive,
322− "bg-wall text-gray": !isActive,
323+ "bg-wall-100 text-wall-500": !isActive,
323 });
324 });
324 return (
325 return (
325 <button
326 <button
pages/grants/[slug].js+10−8
@@ -37,22 +37,24 @@ export default function Grant({ post, markdown, search, similarGrants }) {
37 <Section narrow short>
37 <Section narrow short>
38 <h1>{post.title}</h1>
38 <h1>{post.title}</h1>
39 {post.extra.assignee ? (
39 {post.extra.assignee ? (
40− <div className="type-ui text-gray mt-4">
40+ <div className="type-ui text-wall-500 mt-4">
41 Grantee: {post.extra.assignee}
41 Grantee: {post.extra.assignee}
42 </div>
42 </div>
43 ) : null}
43 ) : null}
44 {post.extra.ship ? (
44 {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>
46 ) : null}
48 ) : 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">
48 {formatDate(new Date(post.date))}
50 {formatDate(new Date(post.date))}
49 </div>
51 </div>
50 <div className="flex items-center flex-wrap mt-4 md:mt-8 lg:mt-10">
52 <div className="flex items-center flex-wrap mt-4 md:mt-8 lg:mt-10">
51 {post.taxonomies.grant_type.map((category) => {
53 {post.taxonomies.grant_type.map((category) => {
52 const className = classnames({
54 const className = classnames({
53− "bg-blue text-white": category === "Proposal",
55+ "bg-blue-400 text-white": category === "Proposal",
54− "bg-green text-white": category === "Apprenticeship",
56+ "bg-green-400 text-white": category === "Apprenticeship",
55− "bg-yellow": category === "Bounty",
57+ "bg-yellow-300": category === "Bounty",
56 });
58 });
57 return (
59 return (
58 <div className={`${className} badge-sm mr-1 my-1`}>
60 <div className={`${className} badge-sm mr-1 my-1`}>
@@ -61,7 +63,7 @@ export default function Grant({ post, markdown, search, similarGrants }) {
61 );
63 );
62 })}
64 })}
63 {post.taxonomies.grant_category.map((category) => (
65 {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">
65 {category}
67 {category}
66 </div>
68 </div>
67 ))}
69 ))}
@@ -72,7 +74,7 @@ export default function Grant({ post, markdown, search, similarGrants }) {
72 </Section>
74 </Section>
73 {canApply && (
75 {canApply && (
74 <a
76 <a
75− className="bg-green text-white badge-sm"
77+ className="bg-green-400 text-white badge-sm"
76 href={post?.extra?.work_request_link}
78 href={post?.extra?.work_request_link}
77 target="_blank"
79 target="_blank"
78 >
80 >
pages/index.js+22−20
@@ -22,21 +22,21 @@ export default function Home({ posts, events, openGrantsCount, search }) {
22 const agent = window.navigator.appVersion;
22 const agent = window.navigator.appVersion;
23 if (agent.includes("Win")) {
23 if (agent.includes("Win")) {
24 return (
24 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">
26 Coming soon for Windows
26 Coming soon for Windows
27 </span>
27 </span>
28 );
28 );
29 } else if (agent.includes("Mac")) {
29 } else if (agent.includes("Mac")) {
30 return (
30 return (
31 <a href="https://github.com/urbit/port/releases/latest/download/Port.dmg">
31 <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">
33 Download For macOS
33 Download For macOS
34 </button>
34 </button>
35 </a>
35 </a>
36 );
36 );
37 } else if (agent.includes("Linux")) {
37 } else if (agent.includes("Linux")) {
38 return (
38 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">
40 sudo snap install port
40 sudo snap install port
41 </code>
41 </code>
42 );
42 );
@@ -70,11 +70,11 @@ export default function Home({ posts, events, openGrantsCount, search }) {
70 // Introducing Port
70 // Introducing Port
71 }
71 }
72 <Section className="hidden md:flex">
72 <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">
74 <div className="pt-20 pl-12 w-7/12">
74 <div className="pt-20 pl-12 w-7/12">
75 <div className="pb-8">
75 <div className="pb-8">
76 <h2 className="p-0 m-0 pb-2 leading-none">Introducing</h2>
76 <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>
78 </div>
78 </div>
79 <h4 className="pb-8">The Urbit client, now in beta.</h4>
79 <h4 className="pb-8">The Urbit client, now in beta.</h4>
80 <p className="pb-24">
80 <p className="pb-24">
@@ -84,7 +84,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
84 {heroButton}
84 {heroButton}
85 <a
85 <a
86 href="https://github.com/urbit/port"
86 href="https://github.com/urbit/port"
87− className="type-ui text-gray"
87+ className="type-ui text-wall-500"
88 >
88 >
89 View on GitHub
89 View on GitHub
90 </a>
90 </a>
@@ -100,29 +100,31 @@ export default function Home({ posts, events, openGrantsCount, search }) {
100 <div className="flex items-center pb-12">
100 <div className="flex items-center pb-12">
101 <h2 className="m-0 p-0 mr-4">Grants</h2>
101 <h2 className="m-0 p-0 mr-4">Grants</h2>
102 <Link href="/grants#find-a-grant">
102 <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">
104 {openGrantsCount} Open
104 {openGrantsCount} Open
105 </a>
105 </a>
106 </Link>
106 </Link>
107 </div>
107 </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">
109 <div className="flex items-center flex-col p-4 w-full">
109 <div className="flex items-center flex-col p-4 w-full">
110− <h2 className="text-green">200+</h2>
110+ <h2 className="text-green-400">200+</h2>
111− <h4 className="text-green text-center pt-2">
111+ <h4 className="text-green-400 text-center pt-2">
112 Urbit stars awarded
112 Urbit stars awarded
113 </h4>
113 </h4>
114 </div>
114 </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" />
116 <div className="flex items-center flex-col p-4 w-full">
116 <div className="flex items-center flex-col p-4 w-full">
117− <h2 className="text-green">400+</h2>
117+ <h2 className="text-green-400">400+</h2>
118− <h4 className="text-green text-center pt-2">
118+ <h4 className="text-green-400 text-center pt-2">
119 Different Contributors
119 Different Contributors
120 </h4>
120 </h4>
121 </div>
121 </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" />
123 <div className="flex items-center flex-col p-4 w-full">
123 <div className="flex items-center flex-col p-4 w-full">
124− <h2 className="text-green">45+</h2>
124+ <h2 className="text-green-400">45+</h2>
125− <h4 className="text-green text-center pt-2">Active Projects</h4>
125+ <h4 className="text-green-400 text-center pt-2">
126+ Active Projects
127+ </h4>
126 </div>
128 </div>
127 </div>
129 </div>
128 <div className="measure py-12">
130 <div className="measure py-12">
@@ -133,7 +135,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
133 </p>
135 </p>
134 <div className="table">
136 <div className="table">
135 <Link href="/grants">
137 <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>
137 </Link>
139 </Link>
138 </div>
140 </div>
139 </div>
141 </div>
@@ -175,7 +177,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
175 for building on Urbit using the languages you already know.
177 for building on Urbit using the languages you already know.
176 </p>
178 </p>
177 <Link href="/docs">
179 <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">
179 Read the Developer Docs
181 Read the Developer Docs
180 </button>
182 </button>
181 </Link>
183 </Link>
@@ -203,7 +205,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
203 />
205 />
204 </div>
206 </div>
205 <Link href="/blog">
207 <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">
207 See More
209 See More
208 </button>
210 </button>
209 </Link>
211 </Link>
@@ -232,7 +234,7 @@ export default function Home({ posts, events, openGrantsCount, search }) {
232 />
234 />
233 </div>
235 </div>
234 <Link href="/events">
236 <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">
236 More Events
238 More Events
237 </button>
239 </button>
238 </Link>
240 </Link>
pages/media/[slug].js+5−3
@@ -29,14 +29,16 @@ export default function MediaPage({ post, markdown, search }) {
29 <Section narrow short>
29 <Section narrow short>
30 <h1>{post.title}</h1>
30 <h1>{post.title}</h1>
31 {post.extra.author ? (
31 {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">
33 {post.extra.author}
33 {post.extra.author}
34 </div>
34 </div>
35 ) : null}
35 ) : null}
36 {post.extra.ship ? (
36 {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>
38 ) : null}
40 ) : null}
39− <div className="type-ui text-gray mt-16">
41+ <div className="type-ui text-wall-500 mt-16">
40 {formatDate(new Date(post.date))}
42 {formatDate(new Date(post.date))}
41 </div>
43 </div>
42 </Section>
44 </Section>
pages/understanding-urbit/[[...slug]].js+7−7
@@ -49,11 +49,11 @@ const pageTree = (thisLink, tree, level = 0) => {
49 const isThisPage = router.asPath === thisLink;
49 const isThisPage = router.asPath === thisLink;
50
50
51 const pageItemClasses = classnames({
51 const pageItemClasses = classnames({
52− "pl-4 text-black text-base hover:text-green": level === 0,
52+ "pl-4 text-wall-600 text-base hover:text-green-400": level === 0,
53− "pl-8 text-black text-base hover:text-green": level === 1,
53+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
54− "pl-12 text-black text-base hover:text-green": level === 2,
54+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
55 "dot relative": isThisPage,
55 "dot relative": isThisPage,
56− "text-green": isThisPage,
56+ "text-green-400": isThisPage,
57 });
57 });
58
58
59 return (
59 return (
@@ -78,10 +78,10 @@ export default function UnderstandingLayout({
78 const isSelected = "/understanding-urbit".includes(router.asPath);
78 const isSelected = "/understanding-urbit".includes(router.asPath);
79 const selectedClasses = classnames({
79 const selectedClasses = classnames({
80 dot: isSelected,
80 dot: isSelected,
81− "text-green": isSelected,
81+ "text-green-400": isSelected,
82− "text-black": !isSelected,
82+ "text-wall-600": !isSelected,
83 });
83 });
84− const rootClasses = "pl-4 text-base hover:text-green";
84+ const rootClasses = "pl-4 text-base hover:text-green-400";
85 return (
85 return (
86 <>
86 <>
87 <Head>
87 <Head>
pages/updates.js+4−4
@@ -38,21 +38,21 @@ export default function Updates({ posts, search }) {
38 <h3 className="mt-4">{post.title}</h3>
38 <h3 className="mt-4">{post.title}</h3>
39 <div className="flex items-baseline">
39 <div className="flex items-baseline">
40 {post?.extra.author ? (
40 {post?.extra.author ? (
41− <div className="type-ui text-gray mt-4">
41+ <div className="type-ui text-wall-500 mt-4">
42 {post?.extra.author}
42 {post?.extra.author}
43 </div>
43 </div>
44 ) : null}
44 ) : null}
45 {post?.extra.author && post?.extra.ship ? (
45 {post?.extra.author && post?.extra.ship ? (
46− <div className="mx-1 text-gray">•</div>
46+ <div className="mx-1 text-wall-500">•</div>
47 ) : null}
47 ) : null}
48 {post?.extra.ship ? (
48 {post?.extra.ship ? (
49− <div className="type-ui text-gray font-mono">
49+ <div className="type-ui text-wall-500 font-mono">
50 {post.extra.ship}
50 {post.extra.ship}
51 </div>
51 </div>
52 ) : null}
52 ) : null}
53 </div>
53 </div>
54
54
55− <div className="type-ui text-gray mt-2">
55+ <div className="type-ui text-wall-500 mt-2">
56 {formatDate(new Date(post.date))}
56 {formatDate(new Date(post.date))}
57 </div>
57 </div>
58 </div>
58 </div>
pages/updates/[slug].js+3−3
@@ -41,14 +41,14 @@ export default function Post({
41 <Section short narrow>
41 <Section short narrow>
42 <h1>{post.title}</h1>
42 <h1>{post.title}</h1>
43 {post.author ? (
43 {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">
45 {post.author}
45 {post.author}
46 </div>
46 </div>
47 ) : null}
47 ) : null}
48 {post.ship ? (
48 {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>
50 ) : null}
50 ) : 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">
52 {formatDate(new Date(post.date))}
52 {formatDate(new Date(post.date))}
53 </div>
53 </div>
54 </Section>
54 </Section>
pages/using/[[...slug]].js+8−7
@@ -51,16 +51,17 @@ const pageTree = (thisLink, tree, level = 0) => {
51 });
51 });
52
52
53 const headingItemClasses = classnames({
53 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":
55 level === 0,
55 level === 0,
56− "pl-4 text-gray text-base font-semibold hover:text-green": level === 1,
56+ "pl-4 text-wall-500 text-base font-semibold hover:text-green-400":
57+ level === 1,
57− "pl-8 text-gray text-base hover:text-green": level === 2,
58+ "pl-8 text-wall-500 text-base hover:text-green-400": level === 2,
58 });
59 });
59
60
60 const pageItemClasses = classnames({
61 const pageItemClasses = classnames({
61− "pl-4 text-black text-base hover:text-green": level === 0,
62+ "pl-4 text-wall-600 text-base hover:text-green-400": level === 0,
62− "pl-8 text-black text-base hover:text-green": level === 1,
63+ "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
63− "pl-12 text-black text-base hover:text-green": level === 2,
64+ "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
64 dot: isThisPage,
65 dot: isThisPage,
65 });
66 });
66
67
@@ -76,7 +77,7 @@ const pageTree = (thisLink, tree, level = 0) => {
76 const isSelected = router.asPath === href;
77 const isSelected = router.asPath === href;
77 const selectedClasses = classnames({
78 const selectedClasses = classnames({
78 dot: isSelected,
79 dot: isSelected,
79− "text-green": isSelected,
80+ "text-green-400": isSelected,
80 });
81 });
81 return (
82 return (
82 <li>
83 <li>
styles/globals.css+6−5
@@ -9,6 +9,7 @@ html,
9body {
9body {
10 padding: 0;
10 padding: 0;
11 margin: 0;
11 margin: 0;
12+ @apply text-wall-600;
12}
13}
13
14
14a {
15a {
@@ -18,7 +19,7 @@ a {
18}
19}
19
20
20p a {
21p a {
21− @apply text-green;
22+ @apply text-green-400 font-semibold;
22}
23}
23
24
24button {
25button {
@@ -29,7 +30,7 @@ button {
29
30
30h1,
31h1,
31.type-h1 {
32.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;
33}
34}
34
35
35h2,
36h2,
@@ -69,7 +70,7 @@ p,
69}
70}
70
71
71code .type-code {
72code .type-code {
72− @apply bg-wall p-4 font-mono;
73+ @apply bg-wall-100 p-4 font-mono;
73}
74}
74
75
75/* Utils */
76/* Utils */
@@ -95,7 +96,7 @@ code .type-code {
95.bg-img {
96.bg-img {
96 background-repeat: no-repeat;
97 background-repeat: no-repeat;
97 background-position: center center;
98 background-position: center center;
98− @apply bg-wall;
99+ @apply bg-wall-100;
99}
100}
100
101
101.button-sm {
102.button-sm {
@@ -190,7 +191,7 @@ a:hover {
190 position: absolute;
191 position: absolute;
191 left: -0.75rem;
192 left: -0.75rem;
192 top: 0.4rem;
193 top: 0.4rem;
193− @apply bg-green;
194+ @apply bg-green-400;
194}
195}
195
196
196.sidebar figure,
197.sidebar figure,
styles/markdown.css+7−7
@@ -92,12 +92,12 @@
92
92
93.markdown code,
93.markdown code,
94.markdown code[class*="language-"] {
94.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;
96}
96}
97
97
98.markdown a code,
98.markdown a code,
99.markdown a code[class*="language-"] {
99.markdown a code[class*="language-"] {
100− @apply bg-washedGreen text-green;
100+ @apply bg-green-100 text-green-400;
101}
101}
102
102
103.markdown pre code,
103.markdown pre code,
@@ -118,11 +118,11 @@
118.markdown li a,
118.markdown li a,
119.markdown h3 a,
119.markdown h3 a,
120.markdown h2 a {
120.markdown h2 a {
121− @apply text-green;
121+ @apply text-green-400;
122}
122}
123
123
124.markdown blockquote {
124.markdown blockquote {
125− @apply border-l-4 border-deepWall pl-6 italic;
125+ @apply border-l-4 border-wall-500 pl-6 italic;
126}
126}
127.markdown blockquote cite {
127.markdown blockquote cite {
128 @apply not-italic font-semibold;
128 @apply not-italic font-semibold;
@@ -141,14 +141,14 @@
141 border-bottom-width: 2px;
141 border-bottom-width: 2px;
142 border-bottom-style: solid;
142 border-bottom-style: solid;
143 padding: 8px !important;
143 padding: 8px !important;
144− @apply border-wall;
144+ @apply border-wall-100;
145}
145}
146
146
147.markdown table tr th:first-child,
147.markdown table tr th:first-child,
148.markdown table tr td:first-child {
148.markdown table tr td:first-child {
149 border-left-width: 2px;
149 border-left-width: 2px;
150 border-left-style: solid;
150 border-left-style: solid;
151− @apply border-wall;
151+ @apply border-wall-100;
152}
152}
153
153
154.markdown table tr th {
154.markdown table tr th {
@@ -157,7 +157,7 @@
157 border-top-style: solid;
157 border-top-style: solid;
158 text-align: left;
158 text-align: left;
159 vertical-align: middle;
159 vertical-align: middle;
160− @apply border-wall;
160+ @apply border-wall-100;
161}
161}
162
162
163/* top-left border-radius */
163/* 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
8
8
9code[class*="language-"],
9code[class*="language-"],
10pre[class*="language-"] {
10pre[class*="language-"] {
11− @apply text-ultraDeepWall;
11+ @apply text-wall-600;
12 background: none;
12 background: none;
13 font-family: "Source Code Pro", monospace;
13 font-family: "Source Code Pro", monospace;
14 font-size: 1em;
14 font-size: 1em;
@@ -75,7 +75,7 @@ code[class*="language-"] {
75
75
76.token.function-name,
76.token.function-name,
77.token.function {
77.token.function {
78− @apply text-black;
78+ @apply text-wall-600;
79}
79}
80
80
81.token.selector,
81.token.selector,
@@ -84,20 +84,20 @@ code[class*="language-"] {
84.token.char,
84.token.char,
85.token.builtin,
85.token.builtin,
86.token.inserted {
86.token.inserted {
87− @apply text-green;
87+ @apply text-green-400;
88}
88}
89
89
90.token.operator,
90.token.operator,
91.token.entity,
91.token.entity,
92.token.url,
92.token.url,
93.token.variable {
93.token.variable {
94− @apply text-gray;
94+ @apply text-wall-500;
95}
95}
96
96
97.token.atrule,
97.token.atrule,
98.token.attr-value,
98.token.attr-value,
99.token.class-name {
99.token.class-name {
100− @apply text-blue;
100+ @apply text-blue-400;
101}
101}
102
102
103.token.keyword {
103.token.keyword {
tailwind.config.js+33−16
@@ -3,26 +3,43 @@ module.exports = {
3 darkMode: false, // or 'media' or 'class'
3 darkMode: false, // or 'media' or 'class'
4 theme: {
4 theme: {
5 colors: {
5 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
6 black: "#000",
36 black: "#000",
7 white: "#FFF",
37 white: "#FFF",
8− gray: "rgba(0, 0, 0, 0.6)",
38+ transparent: "rgba(0,0,0,0)",
9− lightGray: "rgba(0, 0, 0, 0.2)",
39+ // Syntax highlighting
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",
23 purple: "rgba(157,82,255,0.8)",
40 purple: "rgba(157,82,255,0.8)",
24 red: "#ff4136",
41 red: "#ff4136",
25− transparent: "rgba(0,0,0,0)",
42+ // White semi-opaques
26 washedWhite: "rgba(255,255,255, 0.5)",
43 washedWhite: "rgba(255,255,255, 0.5)",
27 midWhite: "rgba(255,255,255, 0.8)",
44 midWhite: "rgba(255,255,255, 0.8)",
28 },
45 },