diff --git a/packages/next-docs/components/mode/index.ts b/packages/next-docs/components/mode/index.ts new file mode 100644 index 0000000000..041eaa6069 --- /dev/null +++ b/packages/next-docs/components/mode/index.ts @@ -0,0 +1 @@ +export * from './mode' diff --git a/packages/next-docs/components/mode/mode.tsx b/packages/next-docs/components/mode/mode.tsx new file mode 100644 index 0000000000..6fb43cfae4 --- /dev/null +++ b/packages/next-docs/components/mode/mode.tsx @@ -0,0 +1,29 @@ +import type { ReactNode } from 'react' +import React from 'react' +import { useTheme } from 'nextra-theme-docs' + +interface Props { + children?: ReactNode +} + +export function DarkMode(props: Props) { + const { children } = props + const mode = useTheme() + + if (mode.resolvedTheme === 'dark') { + return <>{children} + } + + return null +} + +export function LightMode(props: Props) { + const { children } = props + const mode = useTheme() + + if (mode.resolvedTheme === 'light') { + return <>{children} + } + + return null +} diff --git a/packages/next-docs/components/no-ssr/index.ts b/packages/next-docs/components/no-ssr/index.ts new file mode 100644 index 0000000000..5ed3362096 --- /dev/null +++ b/packages/next-docs/components/no-ssr/index.ts @@ -0,0 +1 @@ +export * from './no-ssr' diff --git a/packages/next-docs/components/no-ssr/no-ssr.tsx b/packages/next-docs/components/no-ssr/no-ssr.tsx new file mode 100644 index 0000000000..c742b58b97 --- /dev/null +++ b/packages/next-docs/components/no-ssr/no-ssr.tsx @@ -0,0 +1,18 @@ +import type { ReactNode } from 'react' +import React, { useState, useEffect } from 'react' + +export function NoSSR(props: Props) { + const { children, fallback = <> } = props + const [isClient, setIsClient] = useState(false) + + useEffect(() => { + setIsClient(true) + }, []) + + return <>{isClient ? children : fallback} +} + +interface Props { + children: ReactNode + fallback?: ReactNode +} diff --git a/packages/next-docs/pages/index.mdx b/packages/next-docs/pages/index.mdx index 8807005cf0..ae1d29c50b 100644 --- a/packages/next-docs/pages/index.mdx +++ b/packages/next-docs/pages/index.mdx @@ -2,45 +2,54 @@ title: Shoreline - VTEX Desing System --- -import { heroContainer, hero, subtitle, features, feature } from './index.module.css' +import { heroContainer, hero, subtitle, title, features, feature } from './index.module.css' +import { LightMode, DarkMode } from '../components/mode' +import { NoSSR } from '../components/no-ssr' -
-
- shoreline logo +
+
+ }> + + shoreline logo + + + shoreline logo + +

Build great experiences for merchants in the VTEX Admin.

Shoreline is a design system tailored for enhancing back-office experiences. The system provide design and coding tools and resources for an optimized development experience.

-
-
+ +
-
+
feature foundations
-

Foundations

+

Foundations

Fundamental design guidance for creating quality admin experiences

-
-
+ +
feature components
-

Components

+

Components

Reusable elements and styles, packaged through code, for building admin interfaces

-
-
+ +
feature raccoon
-

Raccoon

+

Raccoon

Coded names that represent design decisions for color, spacing, typography, and more

-
-
- feature api + +
+ feature api
-

API Reference

+

API Reference

Over 400 carefully designed icons focused on commerce and entrepreneurship

-
+
diff --git a/packages/next-docs/pages/index.module.css b/packages/next-docs/pages/index.module.css index d542caef56..a1f8a21c7d 100644 --- a/packages/next-docs/pages/index.module.css +++ b/packages/next-docs/pages/index.module.css @@ -49,6 +49,7 @@ font-weight: 600; line-height: 2.25rem; letter-spacing: -0.07rem; + padding-bottom: 0.625rem; } .features { @@ -63,6 +64,6 @@ gap: 1.75rem; } -.feature h3 { - padding-bottom: 0.625rem; +.feature > img { + border-radius: 1.5rem; } diff --git a/packages/next-docs/public/assets/landing-api-reference.png b/packages/next-docs/public/assets/landing-api-reference.png new file mode 100644 index 0000000000..edfa8916e7 Binary files /dev/null and b/packages/next-docs/public/assets/landing-api-reference.png differ diff --git a/packages/next-docs/public/assets/landing-code.png b/packages/next-docs/public/assets/landing-code.png deleted file mode 100644 index a2258931ab..0000000000 Binary files a/packages/next-docs/public/assets/landing-code.png and /dev/null differ diff --git a/packages/next-docs/public/assets/landing-components.png b/packages/next-docs/public/assets/landing-components.png index 9f013ee253..84c73f6b96 100644 Binary files a/packages/next-docs/public/assets/landing-components.png and b/packages/next-docs/public/assets/landing-components.png differ diff --git a/packages/next-docs/public/assets/landing-foundations.png b/packages/next-docs/public/assets/landing-foundations.png index 2e95f45d8a..3980376fba 100644 Binary files a/packages/next-docs/public/assets/landing-foundations.png and b/packages/next-docs/public/assets/landing-foundations.png differ diff --git a/packages/next-docs/public/assets/landing-logo-dark.png b/packages/next-docs/public/assets/landing-logo-dark.png new file mode 100644 index 0000000000..00fa7b941d Binary files /dev/null and b/packages/next-docs/public/assets/landing-logo-dark.png differ diff --git a/packages/next-docs/public/assets/landing-logo.png b/packages/next-docs/public/assets/landing-logo.png new file mode 100644 index 0000000000..d7283622b0 Binary files /dev/null and b/packages/next-docs/public/assets/landing-logo.png differ diff --git a/packages/next-docs/public/assets/landing-raccoon.png b/packages/next-docs/public/assets/landing-raccoon.png index f665387012..ada2feee6f 100644 Binary files a/packages/next-docs/public/assets/landing-raccoon.png and b/packages/next-docs/public/assets/landing-raccoon.png differ diff --git a/packages/next-docs/public/assets/landing-shoreline-logo.png b/packages/next-docs/public/assets/landing-shoreline-logo.png deleted file mode 100644 index 80d7ba9f5d..0000000000 Binary files a/packages/next-docs/public/assets/landing-shoreline-logo.png and /dev/null differ diff --git a/packages/next-docs/theme.config.tsx b/packages/next-docs/theme.config.tsx index 651842a922..2014b27b98 100644 --- a/packages/next-docs/theme.config.tsx +++ b/packages/next-docs/theme.config.tsx @@ -4,23 +4,59 @@ import { Playground } from './components/playground' import { TokensGrid } from './components/tokens-grid' import { IconsGrid } from './components/icons-grid' -const containerStyle = { - fontWeight: 'bold', - fontSize: '2rem', - fontFamily: 'Inter', -} +const containerStyle = {} const config: DocsThemeConfig = { logo: ( - - ≈ - - Shoreline + + + + + + + + + + + ), project: {