Skip to content

Commit

Permalink
Feature/font centering (#200)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fraincs
fraincs authored Mar 25, 2024
2 parents 02b186b + 6a2fe45 commit 19f8d45
Show file tree
Hide file tree
Showing 22 changed files with 848 additions and 17 deletions.
6 changes: 6 additions & 0 deletions .changeset/silly-brooms-cross.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@hopper-ui/styled-system": minor
"@hopper-ui/tokens": minor
---

Added offset tokens to semantic Typographic composite tokens
1 change: 1 addition & 0 deletions apps/docs/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"Card": true,
"Table": true,
"MotionPreview": true,
"Footnote": true,
"TypographyTable": true,
"TypographyVariantTable": true,
"Tabs": true,
Expand Down
90 changes: 90 additions & 0 deletions apps/docs/app/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
@import url("@/styles/tokens.css");
@import url("@/styles/themes/rehype.css");

@font-face {
font-family: "ABC Favorit Mono";
font-style: normal;
font-weight: 400;
src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/mono/ABCFavoritMono-Regular.woff2") format("woff2-variations");
font-display: fallback;
}

@font-face {
font-family: "ABC Favorit";
font-style: normal;
font-weight: 100 900;
src: url("https://cdn.platform.workleap.com/hopper/fonts/abc-favorit/ABCFavoritVariable.woff2") format("woff2-variations");
font-display: fallback;
}

* {
padding: 0;
margin: 0;
Expand Down Expand Up @@ -86,3 +102,77 @@ a {
background: #1ea7fd2b;
border-radius: 0.25rem;
}

/* Sample */
.hd-sample {
border: var(--hd-border-size) solid var(--hd-color-neutral-border);
border-radius: 0.5rem;
display: grid;
gap: 2rem;
grid-template-columns: 1fr 1fr;
padding: 1rem;
}

.hd-sample__wrapper {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-start;
}

.hd-sample-off-centered-text::before,
.hd-sample-off-centered-text::after {
content: '';
display: block;
width: 0;
height: 0;
}

.hd-sample-text-offset .myBadge {
border: none;
border-radius: 0.5rem;
background-color: #4767FE;
color: #FFFFFF;
height: 1.5rem;
padding: 0 0.5rem;
text-transform: uppercase;
display: inline-flex;
}

.myBadge .hd-sample-off-centered-text.fixed::before {
margin-bottom: -0.125rem;
}

.myBadge .hd-sample-off-centered-text.fixed::after {
margin-top: -0.25rem;
}

.myBadge .hd-sample-off-centered-text {
align-self: center;
font-family: "ABC Favorit Mono", monospace;
font-size: 0.75rem;
font-weight: 400;
line-height: 1.3333;
}

.myHeadline {
box-shadow: inset 0 0 0 1rem rgba(199 222 184 / 80%);
margin-top: 1rem;
max-width: 20ch;
padding: 1rem;
}

.myHeadline .hd-sample-off-centered-text {
font-family: "ABC Favorit", sans-serif;
font-size: 1.25rem;
line-height: 1.2;
font-weight: 580;
}

.myHeadline .hd-sample-off-centered-text.fixed::before {
margin-bottom: -0.125rem;
}

.myHeadline .hd-sample-off-centered-text.fixed::after {
margin-top: -0.3333rem;
}
40 changes: 40 additions & 0 deletions apps/docs/app/guides/[...slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { notFound } from "next/navigation";
import { allGuides } from "contentlayer/generated";

import Aside from "@/components/ui/aside/Aside.tsx";
import Mdx from "@/components/ui/mdx/Mdx";
import getSectionLinks from "@/utils/getSectionLinks.ts";

interface PageProps {
params: {
slug: string;
};
}

export async function generateStaticParams() {
return allGuides.map(({ slug, section }) => ({
slug: [section, slug]
}));
}

export default function GuidePage({ params }: PageProps) {
const [ section, type ] = params.slug;
const guides = allGuides.find(icon => icon.slug === type && icon.section === section);

if (!guides) {
notFound();
}

const sectionLinks = getSectionLinks(guides);

return (
<div className="hd-container">
<Aside title="On this page" links={sectionLinks} />
<main>
<article key={guides._id}>
<Mdx code={guides.body.code} />
</article>
</main>
</div>
);
}
32 changes: 32 additions & 0 deletions apps/docs/app/guides/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
"use client";

import { allGuides } from "contentlayer/generated";
import { useSelectedLayoutSegment } from "next/navigation";
import Sidebar from "@/components/ui/sidebar/Sidebar";
import SubHeader from "@/components/ui/subHeader/SubHeader";
import useSidebarState from "@/hooks/useSidebarState";
import getSectionLinks from "@/utils/getSectionLinks";

export default function TokenLayout({ children }: { children: React.ReactNode }) {
const { isOpen, toggleOpenState } = useSidebarState(false);
const selectedLayoutSegment = useSelectedLayoutSegment();
const [section, type] = selectedLayoutSegment?.split("/") ?? ["", ""];

const pageContent = allGuides.find(icon => icon.slug === type && icon.section === section);

if (!pageContent) {
return null;
}

const sectionLinks = getSectionLinks(pageContent);

return (
<>
<SubHeader toggleOpenState={toggleOpenState} links={sectionLinks} />
<div className="hd-wrapper hd-flex">
<Sidebar data={allGuides} isOpen={isOpen} onClose={toggleOpenState} />
{children}
</div>
</>
);
}
14 changes: 7 additions & 7 deletions apps/docs/app/icons/[...slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { notFound } from "next/navigation";
import { allIcons } from "contentlayer/generated";

import Aside from "@/components/ui/aside/Aside.tsx";
import Mdx from "@/components/ui/mdx/Mdx.tsx";
import Mdx from "@/components/ui/mdx/Mdx";
import getSectionLinks from "@/utils/getSectionLinks.ts";

interface PageProps {
Expand All @@ -17,22 +17,22 @@ export async function generateStaticParams() {
}));
}

export default function TokenPage({ params }: PageProps) {
export default function IconPage({ params }: PageProps) {
const [ section, type ] = params.slug;
const designToken = allIcons.find(icon => icon.slug === type && icon.section === section);
const icons = allIcons.find(icon => icon.slug === type && icon.section === section);

if (!designToken) {
if (!icons) {
notFound();
}

const sectionLinks = getSectionLinks(designToken);
const sectionLinks = getSectionLinks(icons);

return (
<div className="hd-container">
<Aside title="On this page" links={sectionLinks} />
<main>
<article key={designToken._id}>
<Mdx code={designToken.body.code} />
<article key={icons._id}>
<Mdx code={icons.body.code} />
</article>
</main>
</div>
Expand Down
4 changes: 4 additions & 0 deletions apps/docs/app/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,3 +78,7 @@ article code {
padding-block: 0.125rem;
padding-inline: 0.25rem;
}

article table + p {
margin-block-start: 2rem;
}
63 changes: 63 additions & 0 deletions apps/docs/app/playground/typography/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,69 @@ export default function CodeBlockPage() {
</p>
<span className="number">0123456789</span>
</div>
<h2 className="">Centering</h2>
<h3>Contained</h3>
<div className="favorit-mono button-sample">
<button className="centering-text overline" type="button"><span className="offset">future</span></button>
<button className="centering-text overline" type="button"><span className="offset">0123456789</span></button>
</div>
<div className="favorit button-sample">
<button className="centering-text xs" type="button"><span className="offset">future</span></button>
<button className="centering-text xs" type="button"><span className="offset">0123456789</span></button>
</div>
<div className="favorit button-sample">
<button className="centering-text sm" type="button"><span className="offset">future</span></button>
<button className="centering-text sm" type="button"><span className="offset">0123456789</span></button>
</div>
<div className="favorit button-sample">
<button className="centering-text md" type="button"><span className="offset">future</span></button>
<button className="centering-text md" type="button"><span className="offset">0123456789</span></button>
</div>
<div className="favorit button-sample">
<button className="centering-text lg" type="button"><span className="offset">future</span></button>
<button className="centering-text lg" type="button"><span className="offset">0123456789</span></button>
</div>
<div className="favorit button-sample">
<button className="centering-text xl" type="button"><span className="offset">future</span></button>
<button className="centering-text xl" type="button"><span className="offset">0123456789</span></button>
</div>
<div className="favorit button-sample">
<button className="centering-text two-xl" type="button"><span className="offset">future</span></button>
<button className="centering-text two-xl" type="button"><span className="offset">0123456789</span></button>
</div>
<div className="favorit button-sample">
<button className="centering-text three-xl" type="button"><span className="offset">future</span></button>
<button className="centering-text three-xl" type="button"><span className="offset">0123456789</span></button>
</div>
<h2>Free Text</h2>
<div className="favorit-mono free-text-sample">
<p className="centering-text offset overline">The future is in the past tense</p>
</div>
<div className="favorit free-text-sample">
<p className="centering-text offset xs">The future is in the past tense but why</p>
</div>
<div className="favorit free-text-sample">
<p className="centering-text offset sm">The future is in the past tense but why</p>
</div>
<div className="favorit free-text-sample">
<p className="centering-text offset md">The future is in the past tense but why</p>
</div>
<div className="favorit free-text-sample">
<p className="centering-text offset lg">The future is in the past tense but why</p>
</div>
<div className="favorit free-text-sample">
<p className="centering-text offset xl">The future is in the past tense but why</p>
</div>
<div className="favorit free-text-sample">
<p className="centering-text offset two-xl">The future is in the past tense but why</p>
</div>
<div className="favorit free-text-sample">
<p className="centering-text offset three-xl">The future is in the past tense but why</p>
</div>
<div className="favorit flex">
<div className="tag xs"><span className="offset">My Title</span></div>
<div className="tag xs"><span>My Title</span></div>
</div>
</main>
</>
);
Expand Down
Loading

0 comments on commit 19f8d45

Please sign in to comment.