diff --git a/package.json b/package.json index f4e8a74..dad1129 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "phosphor-home", - "version": "2.0.0", + "version": "2.0.1", "license": "MIT", "homepage": "https://phosphoricons.com", "author": { diff --git a/src/assets/paperclips-2.svg b/src/assets/paperclips-2.svg index 18eb398..75e41e4 100644 --- a/src/assets/paperclips-2.svg +++ b/src/assets/paperclips-2.svg @@ -1,32 +1,19 @@ - - - + + + - - - + + + + + - - - - - - - - - - - - - - - - - - + + + diff --git a/src/assets/paperclips-3.svg b/src/assets/paperclips-3.svg index 279e4dc..68d3971 100644 --- a/src/assets/paperclips-3.svg +++ b/src/assets/paperclips-3.svg @@ -1,49 +1,31 @@ - - - + + + - - - + + + + - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + diff --git a/src/assets/ruler-marker-spec.svg b/src/assets/ruler-marker-spec.svg index b99dc19..6c0a8eb 100644 --- a/src/assets/ruler-marker-spec.svg +++ b/src/assets/ruler-marker-spec.svg @@ -1,113 +1,113 @@ - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - - - - - - + + + + + + + - - - - - - - - - + + + + + + + + + @@ -116,7 +116,7 @@ - + @@ -141,7 +141,7 @@ - + @@ -153,7 +153,7 @@ - + diff --git a/src/assets/ruler-marker.svg b/src/assets/ruler-marker.svg index 64530af..ff0e259 100644 --- a/src/assets/ruler-marker.svg +++ b/src/assets/ruler-marker.svg @@ -1,4 +1,5 @@ + diff --git a/src/assets/synth.svg b/src/assets/synth.svg index 2458d86..d047fa4 100644 --- a/src/assets/synth.svg +++ b/src/assets/synth.svg @@ -1,153 +1,149 @@ - - - - - + - - - - + + + + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -171,10 +167,10 @@ - + - + @@ -183,10 +179,10 @@ - + - + @@ -221,6 +217,7 @@ + diff --git a/src/components/App/App.css b/src/components/App/App.css index 4e9db5c..ebd73bc 100644 --- a/src/components/App/App.css +++ b/src/components/App/App.css @@ -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); } diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index b6e6843..499a3a9 100644 --- a/src/components/App/App.tsx +++ b/src/components/App/App.tsx @@ -29,11 +29,14 @@ const App: React.FC = () => { () => ({ "--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] ); diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css index 935e7b6..ddfece7 100644 --- a/src/components/Footer/Footer.css +++ b/src/components/Footer/Footer.css @@ -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; } } diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index b03db32..96699a3 100644 --- a/src/components/Footer/Footer.tsx +++ b/src/components/Footer/Footer.tsx @@ -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) => {

- 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{" "} + + Helena Zhang + {" "} + and{" "} + + Tobias Fried + + .

- 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{" "} + + AllTrails + + ,{" "} + + Figma Academy + + ,{" "} + + Framer + + ,{" "} + + Outgo + + ,{" "} + + Pablo Stanley + + ,{" "} + + reMarkable + + ,{" "} + + Qatalog + + ,{" "} + + Spacedrive + + ,{" "} + + Stash + + , and{" "} + + Threads + + .

Phosphor is free and open-source, licensed under{" "} @@ -92,19 +142,23 @@ const Footer = (_: FooterProps) => { ) } > - + Become a patron

- Phosphor Icons is designed by{" "} - - Helena Zhang + Type set in{" "} + + Manrope {" "} - and built by{" "} - - Toby Fried + by Mikhail Sharanda and{" "} + + IBM Plex Mono + .{" "} + Contact us at{" "} + + hello@phosphoricons.com {" "} { > πŸ™‡πŸ»β€β™€οΈπŸ‘¨β€πŸ’»πŸˆ - . Contact us at{" "} - - hello@phosphoricons.com - - .Β Type set in{" "} - - Manrope - {" "} - by Mikhail Sharanda.

- -
- - +
+ + +
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index c628bf3..8e633c4 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -39,7 +39,7 @@ const Header = (_: HeaderProps) => { return (
- +
diff --git a/src/components/IconGrid/IconGrid.css b/src/components/IconGrid/IconGrid.css index 32021b6..6b8f1f6 100644 --- a/src/components/IconGrid/IconGrid.css +++ b/src/components/IconGrid/IconGrid.css @@ -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 { diff --git a/src/components/IconGrid/IconGridItem.tsx b/src/components/IconGrid/IconGridItem.tsx index c0345d0..49877a2 100644 --- a/src/components/IconGrid/IconGridItem.tsx +++ b/src/components/IconGrid/IconGridItem.tsx @@ -86,7 +86,7 @@ const IconGridItem = (props: IconGridItemProps) => { >

- {name} + {name} {isNew && β€’} {isUpdated && β€’}

diff --git a/src/components/IconGrid/Panel.tsx b/src/components/IconGrid/Panel.tsx index 9814a60..aa2fce2 100644 --- a/src/components/IconGrid/Panel.tsx +++ b/src/components/IconGrid/Panel.tsx @@ -82,7 +82,7 @@ const ActionButton = ( return ( + {isWeightSupported && ( + + )}
), diff --git a/src/components/IconGrid/TagCloud.css b/src/components/IconGrid/TagCloud.css index 64f3729..4543e16 100644 --- a/src/components/IconGrid/TagCloud.css +++ b/src/components/IconGrid/TagCloud.css @@ -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 { diff --git a/src/components/Links/Links.css b/src/components/Links/Links.css index 98b6d2e..a66727f 100644 --- a/src/components/Links/Links.css +++ b/src/components/Links/Links.css @@ -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); diff --git a/src/components/SettingsActions/SettingsActions.tsx b/src/components/SettingsActions/SettingsActions.tsx index ac5ef8c..40f4d57 100644 --- a/src/components/SettingsActions/SettingsActions.tsx +++ b/src/components/SettingsActions/SettingsActions.tsx @@ -80,7 +80,7 @@ const SettingsActions = () => { onClick={copyDeepLinkToClipboard} > {copied ? ( - + ) : ( )} diff --git a/src/components/Tabs/Tabs.css b/src/components/Tabs/Tabs.css index 0aff447..15acb10 100644 --- a/src/components/Tabs/Tabs.css +++ b/src/components/Tabs/Tabs.css @@ -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 {