diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css index 00ecf5523..93f4f8360 100644 --- a/apps/docs/app/globals.css +++ b/apps/docs/app/globals.css @@ -58,14 +58,6 @@ a { display: flex; } -.hd-home { - display: flex; - flex-direction: column; - gap: 3rem; - min-height: 40vh; - justify-content: center; -} - .hd-display { font-size: var(--hd-step-5); font-weight: 500; diff --git a/apps/docs/app/home.css b/apps/docs/app/home.css new file mode 100644 index 000000000..ceca49135 --- /dev/null +++ b/apps/docs/app/home.css @@ -0,0 +1,594 @@ +.hd-home__heading { + align-items: center; + display: flex; + flex-direction: column; + text-align: center; + margin: 0 auto; + max-width: 43rem; +} + +.hd-home__header { + font-size: 2.25rem; + line-height: 1.3333; +} + +.hd-home__tagline { + color: var(--hd-color-neutral-text-weak); + font-size: 1rem; + line-height: 1.5; + margin-top: var(--hd-space-1); + max-width: 60ch; +} + +.hd-home__ctas { + display: flex; + gap: var(--hd-space-3); + justify-content: center; + margin-top: var(--hd-space-4); +} + +.hd-home__features { + display: grid; + gap: var(--hd-space-4); + grid-template-columns: repeat(1, 1fr); + margin-top: var(--hd-space-10); + text-align: center; +} + +.hd-home__feature-item { + display: flex; + flex-direction: column; + align-items: center; +} + +.hd-home__feature-title { + justify-content: center; + display: flex; + font-size: 1.125rem; + gap: var(--hd-space-1); + line-height: 1.3333; +} + +.hd-home-feature-title__icon path { + height: var(--hd-space-3); + aspect-ratio: 1/1; + stroke: var(--hd-color-neutral-icon); +} + +@media screen and (width >= 37.5rem) { + .hd-home__features { + grid-template-columns: repeat(2, 1fr); + text-align: left; + } + + .hd-home__feature-item { + align-items: start; + } +} + +@media screen and (width >= 48rem) { + .hd-home__features { + grid-template-columns: repeat(4, 1fr); + } +} + +.hd-icon-fill { + fill: var(--hd-color-neutral-icon); + stroke: transparent; +} + +.hd-icon-fill path { + stroke: transparent; +} + +.hd-home__feature-copy { + color: var(--hd-color-neutral-text-weak); + font-size: 0.875rem; + line-height: 1.4285; + margin-top: var(--hd-space-1); + max-width: 50ch; +} + +/* Samples Section */ +.hd-home-samples { + display: grid; + gap: var(--hd-space-3); + grid-template-columns: 1fr; + margin-top: var(--hd-space-10); +} + +@media screen and (width >= 78.75rem) { + .hd-home-samples { + grid-template-columns: repeat(2, 1fr); + } +} + +.hd-home-sample__item { + --background: var(--hd-white); + --color: var(--hd-neutral-50); + + background: linear-gradient(90deg, var(--background) 0.625rem, transparent 1%) 50%, linear-gradient(var(--background) 0.625rem, transparent 1%) 50%, var(--color); + background-size: 0.75rem 0.75rem; + border: var(--hd-border-size) solid var(--hd-color-neutral-border); + border-radius: var(--hd-space-2); + padding: var(--hd-space-3); + position: relative; +} + +[data-theme="dark"] .hd-home-sample__item { + --background: var(--hd-neutral-900); + --color: var(--hd-neutral-800); +} + +a.hd-home-sample__item:hover { + box-shadow: 0 0.625rem 0.625rem calc(-1 * 0.0313rem) rgba(0 0 0 / 6%), 0 0.1875rem 0.1875rem calc(-1 * 0.0938rem) rgba(0 0 0 / 6%), 0 0.375rem 0.375rem calc(-1 * 0.0938rem) rgba(0 0 0 / 6%), 0 0.75rem 0.75rem calc(-1 * 0.375rem) rgba(0 0 0 / 6%), 0 1.5rem 1.5rem calc(-1 * 0.75rem) rgba(0 0 0 / 6%); + transform: translate(-0.125rem, -0.125rem); + transition: box-shadow 0.3s ease, transform 0.2s ease-in; +} + +a.hd-home-sample__item:hover .hd-home-sample__title-icon { + opacity: 1; + transform: translateX(0); +} + +a.hd-home-sample__item:hover::after { + bottom: -0.25rem; + content: ""; + display: block; + height: 0.25rem; + left: 0; + position: absolute; + width: 100%; +} + +.hd-home-sample__title { + align-items: center; + align-self: flex-start; + color: var(--hd-color-neutral-text); + display: flex; + font-size: 1.25rem; + gap: 0.25rem; + line-height: 1.2; +} + +.hd-home-sample__title-wrap { + align-items: center; + display: flex; + gap: 0.5rem; +} + +.hd-home-sample__title-icon { + fill: var(--hd-color-neutral-icon); + opacity: 0; + transform: translateX(-1rem); + transition: opacity 0.2s ease, transform 0.1s ease-in; +} + +.hd-home-sample__tagline { + color: var(--hd-color-neutral-text-weak); + font-size: 1rem; + line-height: 1.5; + margin-top: var(--hd-space-05); + margin-bottom: var(--hd-space-3); +} + +.hd-home-samples__row { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; +} + +@media screen and (width >= 37.5rem) { + .hd-home-samples__row { + grid-template-columns: repeat(2, 1fr); + } +} + +.hd-home-samples__col { + display: grid; + gap: 1.5rem; +} + +.hd-home-samples__main-wrapper { + grid-template-columns: 1fr; +} + +@media screen and (width >= 62rem) { + .hd-home-samples__main-wrapper { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (width >= 78.75rem) { + .hd-home-samples__main-wrapper { + grid-template-columns: 1fr; + } +} + +/* colors sample */ +.hd-home-sample__colors { + align-self: start; + display: grid; + justify-content: flex-end; + gap: var(--hd-space-1); + margin-block: calc(-1 * var(--hd-space-1)); +} + +.hd-home-sample__colors-row { + display: flex; + gap: var(--hd-space-1); +} + +.hd-home-sample__color { + border-radius: var(--hd-space-1); + display: flex; + height: 1.875rem; + width: 1.875rem; +} + +.hd-home-sample__item-colors { + display: flex; + gap: var(--hd-space-1); + justify-content: space-between; +} + +/* Rock Color */ +.hd-home-sample__color-rock-200 { + background-color: #B3B3B1; +} + +.hd-home-sample__color-rock-300 { + background-color: #959593; +} + +.hd-home-sample__color-rock-400 { + background-color: #777775; +} + +.hd-home-sample__color-rock-500 { + background-color: #6C6C6B; +} + +/* Sapphire Color */ +.hd-home-sample__color-sapphire-200 { + background-color: #95B1FF; +} + +.hd-home-sample__color-sapphire-300 { + background-color: #6C8FFD; +} + +.hd-home-sample__color-sapphire-400 { + background-color: #4767FE; +} + +.hd-home-sample__color-sapphire-500 { + background-color: #3B57FF; +} + +/* Sizes */ +.hd-home-sample__sizes { + display: flex; + gap: var(--hd-space-1); + margin-block: calc(-1 * var(--hd-space-1)); +} + +.hd-home-sample__item-sizes { + display: flex; + justify-content: space-between; + gap: var(--hd-space-1); + flex-wrap: wrap; +} + +.hd-home-sample__size { + display: flex; + flex-direction: column; + gap: var(--hd-space-05); +} + +.hd-home-sample__size-text { + color: var(--hd-color-accent-text); + font-size: 0.625rem; + text-align: right; +} + +.hd-home-sample__size-bar { + background-color: var(--hd-color-accent-surface); + min-height: 3.5rem; + height: 100%; +} + +.hd-home-sample__size-16 .hd-home-sample__size-bar { + width: 1rem; +} + +.hd-home-sample__size-24 .hd-home-sample__size-bar { + width: 1.5rem; +} + +.hd-home-sample__size-32 .hd-home-sample__size-bar { + width: 2rem; +} + +.hd-home-sample__size-40 .hd-home-sample__size-bar { + width: 2.5rem; +} + +/* Icons */ +.hd-home-sample__icons { + display: flex; + gap: var(--hd-space-2); + flex-direction: column; + flex-grow: 1; + justify-content: space-between +} + +.hd-home-sample__item-icons { + display: flex; + flex-direction: column; +} + +.hd-home-sample__icons-row.hd-home-sample__icons-extra-row { + display: none; +} + +@media screen and (width >= 62rem) { + .hd-home-sample__icons { + gap: var(--hd-space-3); + } + + .hd-home-sample__icons-row.hd-home-sample__icons-extra-row { + display: flex; + } +} + +@media screen and (width >= 78.75rem) { + .hd-home-sample__icons { + gap: var(--hd-space-2); + } + + .hd-home-sample__icons-row.hd-home-sample__icons-extra-row { + display: none; + } +} + +.hd-home-sample__icons-row { + display: flex; + justify-content: space-between; +} + +.hd-home-samples .hd-home-sample__icons-icon { + color: var(--hop-neutral-icon-weak); +} + +.hd-home-samples .hd-home-sample__icons-icon--active { + color: var(--hop-primary-icon); +} + +.hd-home-samples .hd-home-sample__icons-icon--strong { + color: var(--hop-neutral-icon); +} + +/* Text Styles */ +.hd-home-sample__item-text-styles { + display: flex; + flex-direction: column; +} + +.hd-home-sample__text-styles { + border-bottom: 0; + border-image: linear-gradient(90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-top: 0; + border-style: solid; + border-right: 0; + border-top-width: var(--hd-border-size); + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--hd-space-3); + margin-top: var(--hd-space-3); +} + +@media screen and (width >= 37.5rem) { + .hd-home-sample__text-styles { + grid-template-columns: 1fr; + gap: var(--hd-space-1); + } +} + +@media screen and (width >= 44rem) { + .hd-home-sample__text-styles { + grid-template-columns: repeat(2, 1fr); + gap: var(--hd-space-3); + } +} + +.hd-home-sample__text { + font-family: Inter, sans-serif; + font-size: 5.25rem; + font-weight: 700; +} + +.hd-home-sample__text-lowercase { + color: transparent; + -webkit-text-stroke: 0.125rem var(--hd-color-neutral-text); +} + +.hd-home-sample__text-styles-col { + display: flex; + align-items: center; +} + +.hd-home-sample__text-styles-controls { + --background: var(--hd-white); + + align-items: start; + background-image: linear-gradient(180deg, var(--background) 0%, var(--background) 75%, rgba(255 255 255 / 0%) 100%); + border-bottom: 0; + border-image: linear-gradient(0deg, rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-top: 0; + border-left-width: var(--hd-border-size); + display: grid; + flex-direction: column; + flex-grow: 1; + gap: 0.75rem; + padding: var(--hd-space-2); +} + +@media screen and (width >= 37.5rem) { + .hd-home-sample__text-styles-controls { + grid-template-columns: repeat(2, 1fr); + border-image: linear-gradient(90deg, rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-style: solid; + border-top-width: var(--hd-border-size); + } +} + +@media screen and (width >= 44rem) { + .hd-home-sample__text-styles-controls { + grid-template-columns: 1fr; + border-image: linear-gradient(0deg, rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-top: 0; + } +} + +[data-theme="dark"] .hd-home-sample__text-styles-controls { + --background: var(--hd-neutral-900); +} + +.hd-home-sample__control-knob { + align-items: center; + display: flex; + gap: 0.75rem; +} + +.hd-home-sample__control-knob-title { + align-items: center; + display: flex; + gap: 0.25rem; +} + +.hd-home-sample__control-knob-value { + color: var(--hd-color-neutral-text); + font-family: Arial, Helvetica, sans-serif; + font-size: 0.75rem; + line-height: 1; +} + +/* Text Styles - Control Text */ +.hd-home-sample__control-title { + font-family: Inter, sans-serif; + font-size: 0.75rem; + font-weight: 500; + line-height: 1.3333; +} + +/* Components */ +.hd-home-sample__item-components { + display: grid; + grid-template-rows: min-content min-content 1fr; +} + +.hd-home-sample-components { + display: grid; + grid-template-columns: 1fr; +} + +@media screen and (width >= 37.5rem) { + .hd-home-sample-components { + grid-template-columns: repeat(2, 1fr); + } +} + +@media screen and (width >= 62rem) { + .hd-home-sample-components { + grid-template-columns: repeat(4, 1fr); + } +} + +@media screen and (width >= 78.75rem) { + .hd-home-sample-components { + grid-template-columns: repeat(2, 1fr); + } +} + +.hd-home-sample-components__item-wrapper { + display: flex; +} + +.hd-home-sample-components__item { + --background: rgba(255 255 255 / 70%); + + align-items: center; + display: flex;; + flex-grow: 1; + justify-content: center; + padding: 1rem; +} + +@media screen and (width >= 78.75rem) { + .hd-home-sample-components__item-wrapper:nth-child(odd) { + background: linear-gradient(-90deg, var(--background) 0%, var(--background) 85%, rgba(0 212 255 / 0%) 100%); + border-bottom: 0; + border-image: linear-gradient(90deg,rgba(0 0 0 / 0%),rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left: 0; + border-top-width: var(--hd-border-size); + } + + .hd-home-sample-components__item-wrapper:nth-child(even) { + background: linear-gradient(90deg, var(--background) 0%, var(--background) 85%, rgba(255 255 255 / 0%) 100%); + border-bottom: 0; + border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left: 0; + border-top-width: var(--hd-border-size); + } + + .hd-home-sample-components__item-wrapper:nth-child(2) .hd-home-sample-components__item { + border-bottom: 0; + border-image: linear-gradient(-90deg,rgba(0 0 0 / 0%), rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left-width: var(--hd-border-size); + border-top: 0; + } + + .hd-home-sample-components__item-wrapper:nth-child(4) .hd-home-sample-components__item { + border-bottom: 0; + border-image: linear-gradient(0deg,rgba(0 0 0 / 0%) 0%, rgba(0 0 0 / 0%) 25%, rgb(186 188 192)) 1; + border-style: solid; + border-right: 0; + border-left-width: var(--hd-border-size); + border-top: 0; + } +} + +[data-theme="dark"] .hd-home-sample-components__item { + --background: rgba(41 41 41 / 70%); +} + +/* Components - Fake */ +.hd-home-sample-components__buttons { + display: flex; + gap: var(--hd-space-2); +} + +/* Upcoming */ +.hd-home-sample__item-upcoming { + background-image: linear-gradient(0deg, rgba(202 79 79 / 20%) 0%, rgba(60 60 60 / 50%) 75%); + border-radius: inherit; + display: flex; + inset: 0; + opacity: 0.1; + position: absolute; + z-index: 10; +} + +[data-theme="dark"] .hd-home-sample__item-upcoming { + background: linear-gradient(0deg, rgba(80 80 80 / 20%) 0%, rgba(80 80 80 / 60%) 75%); + opacity: 0.6; +} diff --git a/apps/docs/app/layout.css b/apps/docs/app/layout.css index 39952a4e7..c1a8a1c54 100644 --- a/apps/docs/app/layout.css +++ b/apps/docs/app/layout.css @@ -29,12 +29,6 @@ main { order: 1; } -@media screen and (width >= 48rem) { - main { - padding-block-start: 0; - } -} - @media screen and (width >= 62rem) { .hd-container { flex-direction: row; @@ -42,7 +36,6 @@ main { main { order: 1; - padding-block-start: var(--hd-space-8); } } @@ -51,6 +44,10 @@ p { line-height: 1.5; } +.hd-content ul { + list-style-position: inside; +} + .hd-content p:not(:last-child) { margin-block-end: 1.25rem; } diff --git a/apps/docs/app/pages/landing/page.tsx b/apps/docs/app/pages/landing/page.tsx new file mode 100644 index 000000000..bb0db0314 --- /dev/null +++ b/apps/docs/app/pages/landing/page.tsx @@ -0,0 +1,211 @@ +"use client"; + +import { Button as HopperButton, HopperProvider } from "@hopper-ui/components"; +import Image from "next/image"; +import { AccessibleIcon, ArrowIcon, DarkModeIcon, FontSizeIcon, InternationalIcon, LineHeightIcon, MarginIcon, SelectArrowIcon, TypescriptIcon } from "../../../components/icon/index"; +import { type ColorScheme, ThemeContext } from "@/context/theme/ThemeProvider.tsx"; +import { useContext } from "react"; +import Button from "@/components/button/Button"; +import Tag from "@/components/tag/Tag"; +import { ExternalLinkIcon, Icon } from "@/components/icon"; + +// eslint-disable-next-line max-len +import { CalendarIcon, ChartBarIcon, CheckmarkIcon, DeleteIcon, EyeVisibleIcon, FilterIcon, FocusIcon, ItalicIcon, LightbulbIcon, LockIcon, MailIcon, NotebookIcon, PinIcon, ProfileIcon, ReactionIcon, RecurringIcon, RewindIcon, SearchIcon, ShareIcon, StarIcon, StickyIcon, SyncIcon, TeamIcon, ThumbsUpIcon, UnarchiveIcon, WarningIcon } from "@hopper-ui/icons"; + +import "@hopper-ui/tokens/fonts.css"; +import "../../home.css"; + +export default function Home() { + const { colorMode } = useContext(ThemeContext); + + const theme = colorMode as ColorScheme; + + return ( +
+
+
+

Leap into creativity

+

Explore our Design System, where icons, tokens, and components are handpicked for ultimate simplicity and accessibility.

+
+
+ + +
+
+
+

Accessible

+

+ Built with accessibility in mind Hopper is based on React Aria Components +

+
+
+

International

+

+ Experience is pushed further with internationalization. +

+
+
+

Typescript

+

+ Typescript based for reduced learning curve and error detection. +

+
+
+

Dark mode

+

+ Switching from light to dark mode couldn't be easier. +

+
+
+
+
+
+ + +
+ +

Icons

+

A set of commonly used interface icons.

+ +
+ + + + + + + + + +
+
+ + + + + + + + + +
+
+ + + + + + + + + +
+ + +
+
+
+
+

Components

+ upcoming +
+

An accessible suite of components powered by react-aria.

+
+
+
+ Avatar Group component preview +
+
+
+
+ Select Fielg component preview +
+
+
+
+ +
+ Confirm + I need help +
+ +
+
+
+
+ Radio Group Component preview +
+
+
+
+
+
+
+ ); +} diff --git a/apps/docs/app/tokens.css b/apps/docs/app/tokens.css index 6b7d4f2e3..415ae193a 100644 --- a/apps/docs/app/tokens.css +++ b/apps/docs/app/tokens.css @@ -89,7 +89,7 @@ [data-theme="dark"] { --hd-color-white-surface: var(--hd-neutral-800); --hd-color-neutral-surface: var(--hd-neutral-900); - --hd-color-neutral-surface-weak: var(--hd-neutral-800); + --hd-color-neutral-surface-weak: var(--hd-neutral-900); --hd-color-surface-neutral-selection: var(--hd-neutral-300); --hd-color-neutral-text: var(--hd-neutral-0); --hd-color-neutral-text-strong: var(--hd-neutral-900); diff --git a/apps/docs/app/ui/layout/aside/aside.css b/apps/docs/app/ui/layout/aside/aside.css index 53d5f6607..837601c06 100644 --- a/apps/docs/app/ui/layout/aside/aside.css +++ b/apps/docs/app/ui/layout/aside/aside.css @@ -11,6 +11,10 @@ display: flex; padding-block-start: var(--hd-space-8); } + + .hd-aside + main { + padding-block-start: 0; + } } @media screen and (width >= 62rem) { @@ -23,6 +27,10 @@ top: var(--hd-space-8); height: calc(100vh - var(--hd-space-8)); } + + .hd-aside + main { + padding-block-start: var(--hd-space-8); + } } .hd-aside__list { diff --git a/apps/docs/app/ui/layout/header/header.css b/apps/docs/app/ui/layout/header/header.css index b07815403..3ebfe5f22 100644 --- a/apps/docs/app/ui/layout/header/header.css +++ b/apps/docs/app/ui/layout/header/header.css @@ -3,10 +3,22 @@ --hd-header-background-color: rgb(252 251 251 / 50%); --hd-header-border-color: var(--hd-color-neutral-border-weak); --hd-header-height: var(--hd-space-8); + --hd-header-shadow-1-block-color: rgba(175 182 225 / 80%); + --hd-header-shadow-2-block-color: #FECD94; + --hd-header-shadow-3-block-color: #A9F1D6; + --hd-header-shadow-1-top-position: -2.75rem; + --hd-header-shadow-2-top-position: -21.25rem; + --hd-header-shadow-3-top-position: -10.5rem; } [data-theme="dark"] { --hd-header-background-color: rgb(41 40 41 / 80%); + --hd-header-shadow-1-block-color: rgba(175 182 225 / 70%); + --hd-header-shadow-2-block-color: #FECD94; + --hd-header-shadow-3-block-color: #A9F1D6; + --hd-header-shadow-1-top-position: -18.75rem; + --hd-header-shadow-2-top-position: -31.25rem; + --hd-header-shadow-3-top-position: -19.5rem; } .hd-header { @@ -17,9 +29,18 @@ background-color: var(--hd-header-background-color); backdrop-filter: blur(1rem); border-block-end: var(--hd-border-size) solid var(--hd-header-border-color); + border-radius: 0 0 0.5rem 0.5rem; z-index: 999; } +@media screen and (width >= 37.5rem) { + .hd-header { + border-radius: 0.5rem; + margin: 1.5rem auto 0; + width: min(100% - 3rem, 75rem); + } +} + @media screen and (width >= 48rem) { .hd-header { position: sticky; @@ -85,25 +106,25 @@ } .hd-header-shadow-block-1 { - background-color: #AFB6E1; + background-color: var(--hd-header-shadow-1-block-color); width: 32rem; height: 32rem; - top: -18.75rem; + top: var(--hd-header-shadow-1-top-position); right: 6rem; } .hd-header-shadow-block-2 { width: 40rem; height: 40rem; - background-color: #FECD94; + background-color: var(--hd-header-shadow-2-block-color); filter: blur(12.5rem); - top: -31.25rem; + top: var(--hd-header-shadow-2-top-position); } .hd-header-shadow-block-3 { - background-color: #A9F1D6; + background-color: var(--hd-header-shadow-3-block-color); width: 32rem; height: 32rem; - top: -24rem; + top: var(--hd-header-shadow-3-top-position); left: -10.5rem; } diff --git a/apps/docs/app/ui/layout/nav/nav.css b/apps/docs/app/ui/layout/nav/nav.css index eb26c3e25..f93652df7 100644 --- a/apps/docs/app/ui/layout/nav/nav.css +++ b/apps/docs/app/ui/layout/nav/nav.css @@ -6,9 +6,9 @@ } .hd-nav { + display: none; font-size: var(--hd-nav-font-size); line-height: var(--hd-nav-line-height); - display: none; } @media screen and (width >= 37.5rem) { diff --git a/apps/docs/components/button/Button.stories.tsx b/apps/docs/components/button/Button.stories.tsx index 6dafae8ea..229c921dd 100644 --- a/apps/docs/components/button/Button.stories.tsx +++ b/apps/docs/components/button/Button.stories.tsx @@ -49,7 +49,6 @@ export const AsLink: Story = { as: "a", href: "https://www.npmjs.com/package/@hopper-ui/components", target: "_blank" - }, render: args => (
diff --git a/apps/docs/components/button/button.css b/apps/docs/components/button/button.css index 7a06b9555..9ad25469a 100644 --- a/apps/docs/components/button/button.css +++ b/apps/docs/components/button/button.css @@ -32,7 +32,8 @@ flex-direction: row-reverse; } -.hd-btn[data-focus-visible="true"] { +.hd-btn[data-focus-visible="true"], +a.hd-btn:focus-visible { box-shadow: var(--hd-focus-ring); } diff --git a/apps/docs/components/icon/assets/accessible.svg b/apps/docs/components/icon/assets/accessible.svg new file mode 100644 index 000000000..dfeef8cf4 --- /dev/null +++ b/apps/docs/components/icon/assets/accessible.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/docs/components/icon/assets/arrow.svg b/apps/docs/components/icon/assets/arrow.svg new file mode 100644 index 000000000..88f4a7332 --- /dev/null +++ b/apps/docs/components/icon/assets/arrow.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/components/icon/assets/dark-mode.svg b/apps/docs/components/icon/assets/dark-mode.svg new file mode 100644 index 000000000..2eca64c38 --- /dev/null +++ b/apps/docs/components/icon/assets/dark-mode.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/components/icon/assets/font-size.svg b/apps/docs/components/icon/assets/font-size.svg new file mode 100644 index 000000000..c90ece4a9 --- /dev/null +++ b/apps/docs/components/icon/assets/font-size.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/components/icon/assets/international.svg b/apps/docs/components/icon/assets/international.svg new file mode 100644 index 000000000..364959b75 --- /dev/null +++ b/apps/docs/components/icon/assets/international.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/components/icon/assets/line-height.svg b/apps/docs/components/icon/assets/line-height.svg new file mode 100644 index 000000000..76ce86cd7 --- /dev/null +++ b/apps/docs/components/icon/assets/line-height.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/components/icon/assets/margin.svg b/apps/docs/components/icon/assets/margin.svg new file mode 100644 index 000000000..1a9f98949 --- /dev/null +++ b/apps/docs/components/icon/assets/margin.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/components/icon/assets/select-arrow.svg b/apps/docs/components/icon/assets/select-arrow.svg new file mode 100644 index 000000000..736cf9ead --- /dev/null +++ b/apps/docs/components/icon/assets/select-arrow.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/components/icon/assets/typescript.svg b/apps/docs/components/icon/assets/typescript.svg new file mode 100644 index 000000000..a1c9844d7 --- /dev/null +++ b/apps/docs/components/icon/assets/typescript.svg @@ -0,0 +1 @@ + diff --git a/apps/docs/components/icon/index.tsx b/apps/docs/components/icon/index.tsx index adfbb8eeb..713ca09db 100644 --- a/apps/docs/components/icon/index.tsx +++ b/apps/docs/components/icon/index.tsx @@ -1,16 +1,35 @@ -import NpmIcon from "./assets/npm.svg"; -import GithubIcon from "./assets/github.svg"; -import ExternalLinkIcon from "./assets/external-link.svg"; +import AccessibleIcon from "./assets/accessible.svg"; +import ArrowIcon from "./assets/arrow.svg"; import ComponentIcon from "./assets/component.svg"; +import DarkModeIcon from "./assets/dark-mode.svg"; +import ExternalLinkIcon from "./assets/external-link.svg"; +import FontSizeIcon from "./assets/font-size.svg"; +import GithubIcon from "./assets/github.svg"; +import InternationalIcon from "./assets/international.svg"; +import LineHeightIcon from "./assets/line-height.svg"; +import MarginIcon from "./assets/margin.svg"; +import NpmIcon from "./assets/npm.svg"; +import SelectArrowIcon from "./assets/select-arrow.svg"; import TokenIcon from "./assets/tokens.svg"; +import TypescriptIcon from "./assets/typescript.svg"; + import Icon, { type IconProps } from "./Icon.tsx"; export { - Icon, - NpmIcon, - GithubIcon, - ExternalLinkIcon, + AccessibleIcon, + ArrowIcon, ComponentIcon, + DarkModeIcon, + ExternalLinkIcon, + FontSizeIcon, + GithubIcon, + InternationalIcon, + LineHeightIcon, + MarginIcon, + NpmIcon, + SelectArrowIcon, TokenIcon, + TypescriptIcon, + Icon, IconProps }; diff --git a/apps/docs/components/themeSwitch/themeSwitch.css b/apps/docs/components/themeSwitch/themeSwitch.css index 82e247791..60b3b9abf 100644 --- a/apps/docs/components/themeSwitch/themeSwitch.css +++ b/apps/docs/components/themeSwitch/themeSwitch.css @@ -10,7 +10,7 @@ font-size: 1rem; } -@media screen and (width >= 48rem) { +@media screen and (width >= 37.5rem) { .hd-theme-switch__button { width: var(--hd-space-4); aspect-ratio: 1/1; diff --git a/apps/docs/content/icons/react-icons/icon-library.mdx b/apps/docs/content/icons/react-icons/icon-library.mdx index cdc54e9da..907318784 100644 --- a/apps/docs/content/icons/react-icons/icon-library.mdx +++ b/apps/docs/content/icons/react-icons/icon-library.mdx @@ -9,6 +9,8 @@ export const usageMethods = [ { title: "SVG" } ]; +# Icons + All available icons in the icon library are shown below. Use the correct size for each icon. Icons should be used at their original size according to the design. diff --git a/apps/docs/package.json b/apps/docs/package.json index 1fee259c0..3d2c96645 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -32,6 +32,7 @@ "devDependencies": { "@codesandbox/sandpack-react": "^2.13.5", "@hopper-ui/components": "workspace:*", + "@hopper-ui/icons": "workspace:*", "@hopper-ui/tokens": "workspace:*", "@storybook/addon-essentials": "8.0.2", "@storybook/addon-interactions": "8.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee78d2333..bde84e5a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -183,6 +183,9 @@ importers: '@hopper-ui/components': specifier: workspace:* version: link:../../packages/components + '@hopper-ui/icons': + specifier: workspace:* + version: link:../../packages/icons '@hopper-ui/tokens': specifier: workspace:* version: link:../../packages/tokens