andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): all the rest of the things

Browse Source
This commit is contained in:
rektdeckard
2023-03-22 01:29:34 -06:00
parent bdc1996a07
commit 1e95c69d43
18 changed files with 369 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/App/App.css
View File

@@ -2,28 +2,38 @@
--red: #e8612b;
--orange: #ff8e51;
--yellow: #f8c666;
--pale: #ffe8dc;
--peach: #ffd5c0;
--mustard: #d6971e;
--rust: #92543b;
--earth: #825b61;
--sand: #bcadaf;
--blush: #f2cbd1;
--pale: #ffe8dc;
--vellum: #eeeae3;
--ghost: #f7f5f1;
--foam: #e9ebe2;
--lichen: #d2d6c5;
--moss: #3c402b;
--slate: #3e3d3a;
--stone: #343330;
--dark-grey: #656461;
--acid: #c4e456;
--olive: #a4b55b;
--green: #1fa647;
--darkgreen: #245633;
--darkgreen: #2e321f;
--deepgreen: #1f2310;
--blue: #1f7fea;
--purple: #925bff;
--eggplant: #35313d;
--moss-shadow: rgba(60, 64, 43, 0.2);
--slate-sheer: rgba(62, 61, 58, 0.5);
--ghost-sheer: rgba(247, 245, 241, 0.5);
--elephant: #656461;
--pewter: #c9c5bf;
--shadow: rgba(0, 0, 0, 0.15);
--scrim: rgba(255, 255, 255, 0.05);
--sheer: rgba(194, 186, 196, 0.25);
--soft: rgba(194, 186, 196, 0.7);
--translucent: rgba(255, 255, 255, 0.5);
--neutral: #9b9b9b;
}
body {
@@ -140,7 +150,7 @@ a.main-link {
a.main-link:after {
content: "";
position: absolute;
bottom: -2px;
bottom: 0.15em;
left: 0;
width: 100%;
border-bottom: 1px solid var(--moss);
@@ -152,12 +162,16 @@ a.main-link:hover:after {
width: 0%;
}
.name {
color: var(--foreground-secondary);
}
.badge.new {
color: var(--red);
color: var(--mustard);
}
.badge.updated {
color: var(--blue);
color: var(--olive);
}
.badge {
@@ -182,17 +196,16 @@ a.main-link:hover:after {
@keyframes bounce {
0%,
20%,
30%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
20% {
transform: translateY(-12px);
}
60% {
transform: translateY(-4px);
40% {
transform: translateY(-7px);
}
}
@@ -201,13 +214,13 @@ a.main-link:hover:after {
}
@keyframes spin {
0%,
20% {
0% {
transform: rotate(0);
}
40% {
20% {
transform: rotate(200deg);
}
80%,
100% {
transform: rotate(540deg);
}

3
src/components/App/App.tsx
View File

@@ -29,11 +29,14 @@ const App: React.FC<any> = () => {
() => ({
"--foreground": isDark ? "white" : "var(--moss)",
"--foreground-card": isDark ? "white" : "var(--moss)",
"--foreground-secondary": isDark ? "var(--pewter)" : "var(--elephant)",
"--background": isDark ? "var(--slate)" : "var(--vellum)",
"--background-card": isDark ? "var(--stone)" : "var(--vellum)",
"--background-layer": isDark ? "var(--scrim)" : "var(--translucent)",
"--border-card": isDark ? "var(--shadow)" : "var(--moss-shadow)",
"--border-secondary": isDark ? "var(--scrim)" : "var(--moss-shadow)",
"--hover-tabs": isDark ? "var(--slate-sheer)" : "var(--ghost-sheer)",
"--hover-buttons": isDark ? "var(--scrim)" : "var(--slate)",
}),
[isDark]
);

124
src/components/Footer/Footer.css
View File

@@ -11,6 +11,7 @@ footer {
z-index: 2;
font-size: 56px;
justify-content: center;
padding: 0 30px;
}
#back-to-top-button:active {
@@ -48,24 +49,68 @@ footer .links {
.fine-print {
position: relative;
margin: 72px 0 0;
padding-bottom: 32px;
margin: 104px 0 0;
overflow: hidden;
}
.fine-print p {
font-size: 16px;
line-height: 24px;
padding-bottom: 56px;
margin: 0;
}
.illustrations-footer {
position: fixed;
position: absolute;
overflow-y: hidden;
width: 300px;
margin: auto;
display: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
pointer-events: none;
bottom: 0;
left: -456px;
height: 490px;
}
.ruler-marker {
position: absolute;
}
@media screen and (min-width: 720px) {
.outro {
margin: 0 auto;
}
.fine-print {
margin-top: 72px;
}
#back-to-top-button {
position: absolute;
left: 70px;
top: -56px;
}
}
@media screen and (min-width: 720px) and (max-width: 1239px) {
.illustrations-footer {
height: 600px;
left: -320px;
}
.ruler-marker {
bottom: -216px;
}
}
@media screen and (min-width: 1239px) {
.outro {
margin-left: 462px;
}
#back-to-top-button {
position: absolute;
left: 190px;
top: 348px;
}
}
@media screen and (max-width: 719px) {
@@ -86,70 +131,11 @@ footer .links {
margin: 0 0 64px;
}
#command {
display: none;
}
#marker-green {
display: none;
}
.illustrations-footer {
height: 440px;
display: initial;
overflow-y: hidden;
}
}
@media screen and (min-width: 720px) {
.outro {
margin: 0 auto;
}
.fine-print {
margin-top: 96px;
padding-bottom: 96px;
}
#back-to-top-button {
position: absolute;
left: 70px;
top: -56px;
}
#marker-green {
position: absolute;
left: 678px;
top: -218px;
}
#command {
position: absolute;
right: -18px;
top: 144px;
}
.ruler {
position: absolute;
transform: rotate(-5deg);
}
}
@media screen and (min-width: 1239px) {
.outro {
margin-left: 462px;
}
#back-to-top-button {
position: absolute;
left: 190px;
top: 276px;
margin-top: 48px;
}
.illustrations-footer {
display: initial;
position: absolute;
bottom: 0;
height: 500px !important;
display: none;
}
}

103
src/components/Footer/Footer.tsx
View File

@@ -1,11 +1,11 @@
import { useRecoilValue } from "recoil";
import { motion, AnimatePresence, Variants } from "framer-motion";
import { Coffee, Heart, ArrowULeftUp } from "@phosphor-icons/react";
import { ArrowULeftUp, Coffee, HandHeart } from "@phosphor-icons/react";
import Links from "@/components/Links/Links";
import { ReactComponent as MarkerGreen } from "@/assets/marker-green.svg";
import { ReactComponent as Ruler } from "@/assets/ruler.svg";
import { ReactComponent as RulerMarker } from "@/assets/ruler-marker.svg";
import { ReactComponent as RulerMarkerSpec } from "@/assets/ruler-marker-spec.svg";
import { useMediaQuery } from "@/hooks";
import { selectionEntryAtom } from "@/state";
import "./Footer.css";
@@ -49,14 +49,64 @@ const Footer = (_: FooterProps) => {
<div className="outro">
<Links />
<p>
We designed the icon library we always wanted to use. Easy to pick
up and plug in. Truly consistent in style and scale. Flexible to
multiple sizes and weights. Reserved enough to be multi-purpose, but
a little quirky, too.
Phosphor is a passion project by{" "}
<a className="main-link" href="https://helenazhang.com">
Helena Zhang
</a>{" "}
and{" "}
<a className="main-link" href="https://tobiasfried.com">
Tobias Fried
</a>
.
</p>
<p>
We're thankful for the tools we've benefited from and this is our
contribution towards a collaborative community.
It’s used by companies and creatives like{" "}
<a className="main-link" href="https://alltrails.com">
AllTrails
</a>
,{" "}
<a
className="main-link"
href="https://www.dive.club/course/figma-academy"
>
Figma Academy
</a>
,{" "}
<a className="main-link" href="https://www.framer.com/">
Framer
</a>
,{" "}
<a className="main-link" href="https://www.outgo.co/">
Outgo
</a>
,{" "}
<a
className="main-link"
href="https://twitter.com/pablostanley/status/1520222483949015041"
>
Pablo Stanley
</a>
,{" "}
<a className="main-link" href="https://remarkable.com/">
reMarkable
</a>
,{" "}
<a className="main-link" href="https://qatalog.com/">
Qatalog
</a>
,{" "}
<a className="main-link" href="https://www.spacedrive.com/">
Spacedrive
</a>
,{" "}
<a className="main-link" href="https://www.stash.com/">
Stash
</a>
, and{" "}
<a className="main-link" href="https://threads.com/">
Threads
</a>
.
</p>
<p>
Phosphor is free and open-source, licensed under{" "}
@@ -92,19 +142,23 @@ const Footer = (_: FooterProps) => {
)
}
>
<Heart size={24} />
<HandHeart size={24} />
Become a patron
</button>
</div>
<div className="fine-print">
<p>
Phosphor Icons is designed by{" "}
<a className="main-link" href="https://helenazhang.com">
Helena Zhang
Type set in{" "}
<a className="main-link" href="https://manropefont.com/">
Manrope
</a>{" "}
and built by{" "}
<a className="main-link" href="https://tobiasfried.com">
Toby Fried
by Mikhail Sharanda and{" "}
<a className="main-link" href="https://www.ibm.com/plex/">
IBM Plex Mono
</a>.{" "}
Contact us at{" "}
<a className="main-link" href="mailto:hello@phosphoricons.com">
hello@phosphoricons.com
</a>{" "}
<span
role="img"
@@ -112,21 +166,12 @@ const Footer = (_: FooterProps) => {
>
🙇🏻‍♀️👨‍💻🐈
</span>
. Contact us at{" "}
<a className="main-link" href="mailto:hello@phosphoricons.com">
hello@phosphoricons.com
</a>
. Type set in{" "}
<a className="main-link" href="https://manropefont.com/">
Manrope
</a>{" "}
by Mikhail Sharanda.
</p>
</div>
</div>
<div className="illustrations-footer">
<Ruler className="ruler" width="878" height="667" />
<MarkerGreen id="marker-green" />
<div className="illustrations-footer">
<RulerMarkerSpec className="ruler-marker spec" />
<RulerMarker className="ruler-marker inspectable xray" />
</div>
</div>
</div>
</footer>

2
src/components/Header/Header.tsx
View File

@@ -39,7 +39,7 @@ const Header = (_: HeaderProps) => {
return (
<header>
<Banner.Container>
<Banner id={Math.random().toString()}>
<Banner id={"2.0.1"}>
<div className="message">
<MegaphoneSimple size={32} mirrored />
<small>

9
src/components/IconGrid/IconGrid.css
View File

@@ -35,15 +35,14 @@
background-color: var(--background-layer);
}
.grid-item:focus {
.grid-item:focus-visible {
outline: none;
border: 1px solid var(--background-layer);
border: 1px solid var(--foreground);
}
.grid-item p {
font-size: 12px;
line-height: 16px;
opacity: 0.75;
margin-top: 12px;
text-align: center;
}
@@ -105,7 +104,7 @@
}
.disabled {
color: var(--neutral);
color: var(--pewter);
user-select: none;
}
@@ -245,7 +244,7 @@ figcaption > p {
}
.action-button:hover {
background-color: var(--sheer) !important;
background-color: var(--background-layer) !important;
}
.detail-actions .action-button svg {

2
src/components/IconGrid/IconGridItem.tsx
View File

@@ -86,7 +86,7 @@ const IconGridItem = (props: IconGridItemProps) => {
>
<Icon />
<p>
{name}
<span className="name">{name}</span>
{isNew && <span className="badge new">•</span>}
{isUpdated && <span className="badge updated">•</span>}
</p>

39
src/components/IconGrid/Panel.tsx
View File

@@ -82,7 +82,7 @@ const ActionButton = (
return (
<button {...rest} className="action-button text" tabIndex={0}>
{active ? (
<CheckCircle size={20} color="var(--green)" weight="fill" />
<CheckCircle size={20} color="var(--olive)" weight="fill" />
) : (
<Icon size={20} color="currentColor" weight="fill" />
)}
@@ -153,26 +153,23 @@ const Panel = () => {
? snippets[type]
: "This weight is not yet supported"}
</span>
<button
title="Copy snippet"
className="action-button"
onClick={(e) => handleCopySnippet(e, type)}
disabled={!isWeightSupported}
>
{copied === type ? (
<CheckCircle size={20} color="var(--acid)" weight="fill" />
) : (
<Copy
size={20}
color={
!isWeightSupported
? "var(--neutral)"
: "var(--foreground)"
}
weight="fill"
/>
)}
</button>
{isWeightSupported && (
<button
title="Copy snippet"
className="action-button"
onClick={(e) => handleCopySnippet(e, type)}
>
{copied === type ? (
<CheckCircle
size={20}
color="var(--olive)"
weight="fill"
/>
) : (
<Copy size={20} color="var(--foreground)" weight="fill" />
)}
</button>
)}
</pre>
</div>
),

4
src/components/IconGrid/TagCloud.css
View File

@@ -15,11 +15,11 @@ button.tag-button {
}
button.tag-button:hover {
background-color: var(--sheer);
background-color: transparent;
}
button.tag-button:focus-visible {
box-shadow: 0 0 0 1px var(--sheer);
box-shadow: 0 0 0 1px var(--foreground);
}
.tag-button code {

2
src/components/Links/Links.css
View File

@@ -30,7 +30,7 @@ a.nav-link {
a.nav-link:after {
content: "";
position: absolute;
bottom: -2px;
bottom: 0.15em;
left: 0;
width: 0%;
border-bottom: 1px solid var(--moss);

2
src/components/SettingsActions/SettingsActions.tsx
View File

@@ -80,7 +80,7 @@ const SettingsActions = () => {
onClick={copyDeepLinkToClipboard}
>
{copied ? (
<CheckCircle size={24} color="var(--green)" weight="fill" />
<CheckCircle size={24} color="var(--olive)" weight="fill" />
) : (
<Link size={24} />
)}

2
src/components/Tabs/Tabs.css
View File

@@ -34,7 +34,7 @@ button.tab:focus-visible {
}
button.tab:hover:not(.active) {
background-color: var(--sheer);
background-color: var(--hover-tabs);
}
button.tab.active {