From 89d8431dbb372c50674b1828e215a991c81ec829 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Thu, 27 Jun 2024 23:07:32 +0300 Subject: [PATCH] docs: Playground New Branding & Logo (#9331) --- packages/website/docusaurus.config.ts | 3 +- .../src/components/HomepageFeatures/index.tsx | 32 ++++++++---- .../components/HomepageFeatures/styles.css | 3 +- packages/website/src/css/custom.css | 42 ++++++++++------ packages/website/src/pages/index.module.css | 4 +- packages/website/src/pages/index.tsx | 22 ++++++--- packages/website/static/img/LogoFire.svg | 29 +++++++++++ packages/website/static/img/LogoWater.svg | 29 +++++++++++ .../img/compatibility-frameworks/LogoFire.svg | 29 +++++++++++ .../compatibility-frameworks/LogoWater.svg | 29 +++++++++++ .../img/compatibility-frameworks/UI5.svg | 10 ---- .../img/compatibility-frameworks/UI5_new.svg | 29 +++++++++++ packages/website/static/img/favicon.ico | Bin 1150 -> 486 bytes .../static/img/features/dark/Buildings.svg | 46 ++++++++++++++++++ .../static/img/features/dark/Frame.svg | 40 +++++++++++++++ .../website/static/img/features/dark/Hand.svg | 15 ++++++ .../static/img/features/light/Buildings.svg | 46 ++++++++++++++++++ .../static/img/features/light/Frame.svg | 40 +++++++++++++++ .../static/img/features/light/Hand.svg | 15 ++++++ 19 files changed, 417 insertions(+), 46 deletions(-) create mode 100644 packages/website/static/img/LogoFire.svg create mode 100644 packages/website/static/img/LogoWater.svg create mode 100644 packages/website/static/img/compatibility-frameworks/LogoFire.svg create mode 100644 packages/website/static/img/compatibility-frameworks/LogoWater.svg delete mode 100644 packages/website/static/img/compatibility-frameworks/UI5.svg create mode 100644 packages/website/static/img/compatibility-frameworks/UI5_new.svg create mode 100644 packages/website/static/img/features/dark/Buildings.svg create mode 100644 packages/website/static/img/features/dark/Frame.svg create mode 100644 packages/website/static/img/features/dark/Hand.svg create mode 100644 packages/website/static/img/features/light/Buildings.svg create mode 100644 packages/website/static/img/features/light/Frame.svg create mode 100644 packages/website/static/img/features/light/Hand.svg diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts index e63a49f85497..91861fb8f7fc 100644 --- a/packages/website/docusaurus.config.ts +++ b/packages/website/docusaurus.config.ts @@ -88,7 +88,8 @@ const config: Config = { title: 'UI5 Web Components', logo: { alt: 'UI5 Web Components Logo', - src: 'img/logo.png', + src: 'img/LogoWater.svg', + srcDark: 'img/LogoFire.svg', }, items: [ { diff --git a/packages/website/src/components/HomepageFeatures/index.tsx b/packages/website/src/components/HomepageFeatures/index.tsx index e4580d8cae32..830c19afee87 100644 --- a/packages/website/src/components/HomepageFeatures/index.tsx +++ b/packages/website/src/components/HomepageFeatures/index.tsx @@ -1,19 +1,31 @@ import './styles.css'; +import Buildings from "@site/static/img/features/light/Buildings.svg"; +import Frame from "@site/static/img/features/light/Frame.svg"; +import Hand from "@site/static/img/features/light/Hand.svg"; +import BuildingsDark from "@site/static/img/features/dark/Buildings.svg"; +import FrameDark from "@site/static/img/features/dark/Frame.svg"; +import HandDark from "@site/static/img/features/dark/Hand.svg"; + + import { useColorMode } from '@docusaurus/theme-common'; type FeatureItem = { title: string; - src?: string; - srcContrast?: string; + SVG?: React.ComponentType & { + title?: string; + }>; + SVGDark?: React.ComponentType & { + title?: string; + }>; description: JSX.Element; }; const FeatureList: FeatureItem[] = [ { title: 'Easy to Use', - src: require('@site/static/img/features/Frame.png').default, - srcContrast: require('@site/static/img/features-contrast/Frame_inverted.png').default, + SVG: Frame, + SVGDark: FrameDark, description: ( <> Based on web standards - just HTML! @@ -24,8 +36,8 @@ const FeatureList: FeatureItem[] = [ }, { title: 'Lightweight', - src: require('@site/static/img/features/hand.png').default, - srcContrast: require('@site/static/img/features-contrast/hand_inverted.png').default, + SVG: Hand, + SVGDark: HandDark, description: ( <> Tiny - come with a minimal footprint. @@ -36,8 +48,8 @@ const FeatureList: FeatureItem[] = [ }, { title: 'Enterprise Ready', - src: require('@site/static/img/features/buildings.png').default, - srcContrast: require('@site/static/img/features-contrast/buildings_inverted.png').default, + SVG: Buildings, + SVGDark: BuildingsDark, description: ( <> Implements latest SAP Design language. @@ -48,12 +60,12 @@ const FeatureList: FeatureItem[] = [ }, ]; -function Feature({ title, src, srcContrast, description }: FeatureItem) { +function Feature({ title, SVG, SVGDark, description }: FeatureItem) { const { colorMode } = useColorMode(); return (
- {title} + {colorMode === "light" ? : }

{title}

{description}

diff --git a/packages/website/src/components/HomepageFeatures/styles.css b/packages/website/src/components/HomepageFeatures/styles.css index f9c27f1e6096..4f31a77ad291 100644 --- a/packages/website/src/components/HomepageFeatures/styles.css +++ b/packages/website/src/components/HomepageFeatures/styles.css @@ -18,7 +18,8 @@ } .feature__image { - height: 8rem; + height: 10rem; + width: 10rem; } .feature { diff --git a/packages/website/src/css/custom.css b/packages/website/src/css/custom.css index 105d1bb06271..f816548e0dea 100644 --- a/packages/website/src/css/custom.css +++ b/packages/website/src/css/custom.css @@ -35,25 +35,34 @@ } :root { - --ifm-color-primary: #fe7520; - --ifm-color-primary-dark: #fe6304; - --ifm-color-primary-darker: #f25d01; - --ifm-color-primary-darkest: #c74d01; - --ifm-color-primary-light: #fe873c; - --ifm-color-primary-lighter: #fe8f4b; - --ifm-color-primary-lightest: #feaa75; + --ifm-color-primary: #5D36FF; + --ifm-color-primary-dark: #481CFF; + --ifm-color-primary-darker: #481CFF; + --ifm-color-primary-darkest: #481CFF; + --ifm-color-primary-light: #4C72E9; + --ifm-color-primary-lighter: #4C72E9; + --ifm-color-primary-lightest: #4292DC; +} + +.hero--primary { + --ifm-hero-background-color: #fff; } + [data-theme='dark'] { - --ifm-color-primary: #fe7520; - --ifm-color-primary-dark: #fe6304; - --ifm-color-primary-darker: #f25d01; - --ifm-color-primary-darkest: #c74d01; - --ifm-color-primary-light: #fe873c; - --ifm-color-primary-lighter: #fe8f4b; + --ifm-color-primary: #E7641D; + --ifm-color-primary-dark: #e97434; + --ifm-color-primary-darker: #E7641D; + --ifm-color-primary-darkest: #E7641D; + --ifm-color-primary-light: #e97434; + --ifm-color-primary-lighter: #feaa75; --ifm-color-primary-lightest: #feaa75; } +[data-theme='dark'] .hero--primary { + --ifm-hero-background-color: #12171C; +} + :root { --playground-code-background: var(--sys-color-surface); --playground-code-keyword-color: #708; @@ -121,9 +130,6 @@ display: none; } -.hero--primary { - --ifm-hero-background-color: var(--ifm-background-color); -} .header-github-link { @@ -157,6 +163,10 @@ code { } +.navbar__logo img { + height: 1.75rem; +} + .navbar__item li, .navbar__item li a { cursor: pointer; diff --git a/packages/website/src/pages/index.module.css b/packages/website/src/pages/index.module.css index 5a850365fbc1..c5afe243e8dd 100644 --- a/packages/website/src/pages/index.module.css +++ b/packages/website/src/pages/index.module.css @@ -16,7 +16,7 @@ } .heroTitle__UI5 { - color: var(--ifm-color-primary); + font-weight: bold; } .buttons { @@ -43,7 +43,7 @@ @media (min-width: 600px) { .heroTitle { - font-weight: 900; + font-weight: normal; font-size: 5.5rem; } } diff --git a/packages/website/src/pages/index.tsx b/packages/website/src/pages/index.tsx index e877fca1a483..dd81820b85b3 100644 --- a/packages/website/src/pages/index.tsx +++ b/packages/website/src/pages/index.tsx @@ -1,24 +1,34 @@ import clsx from 'clsx'; import Link from '@docusaurus/Link'; +import { useColorMode } from '@docusaurus/theme-common'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import HomepageFeatures from '@site/src/components/HomepageFeatures'; import HomepageDemoApps from '@site/src/components/HomepageDemoApps'; import HomepageTestimonials from '@site/src/components/HomepageTestimonials'; import Heading from '@theme/Heading'; -import UI5Logo from "@site/static/img/compatibility-frameworks/UI5.svg"; +import LogoWater from "@site/static/img/compatibility-frameworks/LogoWater.svg"; +import LogoFire from "@site/static/img/compatibility-frameworks/LogoFire.svg"; import styles from './index.module.css'; +function Logo(props: { colorMode: string }) { + return ( + props.colorMode === "light" ? : + ); +} + function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { colorMode } = useColorMode(); + return (
- + - UI5 Web Components + UI5 Web Components +

An open-source UI components library for building enterprise-ready apps!

@@ -44,8 +54,8 @@ function HomepageHeader() { function Banner() { return (
- 🎉 Get ready for the UI5 Web Components 2.0! - diff --git a/packages/website/static/img/LogoFire.svg b/packages/website/static/img/LogoFire.svg new file mode 100644 index 000000000000..e8b260d9c41b --- /dev/null +++ b/packages/website/static/img/LogoFire.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/LogoWater.svg b/packages/website/static/img/LogoWater.svg new file mode 100644 index 000000000000..14bec081b0f6 --- /dev/null +++ b/packages/website/static/img/LogoWater.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/compatibility-frameworks/LogoFire.svg b/packages/website/static/img/compatibility-frameworks/LogoFire.svg new file mode 100644 index 000000000000..e8b260d9c41b --- /dev/null +++ b/packages/website/static/img/compatibility-frameworks/LogoFire.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/compatibility-frameworks/LogoWater.svg b/packages/website/static/img/compatibility-frameworks/LogoWater.svg new file mode 100644 index 000000000000..14bec081b0f6 --- /dev/null +++ b/packages/website/static/img/compatibility-frameworks/LogoWater.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/compatibility-frameworks/UI5.svg b/packages/website/static/img/compatibility-frameworks/UI5.svg deleted file mode 100644 index fe95f9149c94..000000000000 --- a/packages/website/static/img/compatibility-frameworks/UI5.svg +++ /dev/null @@ -1,10 +0,0 @@ - - -UI5 Web Components - - - - - - - diff --git a/packages/website/static/img/compatibility-frameworks/UI5_new.svg b/packages/website/static/img/compatibility-frameworks/UI5_new.svg new file mode 100644 index 000000000000..14bec081b0f6 --- /dev/null +++ b/packages/website/static/img/compatibility-frameworks/UI5_new.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/favicon.ico b/packages/website/static/img/favicon.ico index c434eb3f3a1478b3b49cc69be66c26f0268692e3..70b2a6ae256a097c3e520a107d0b2687f11d0b23 100644 GIT binary patch literal 486 zcmV@P)3{orGx zF@PJ5er&vsD66jaP}zrs2$me?zOs6uhoT;g_26qM~2b`YW9&g*IYRvl*v<}bejErNgwkt!jW zxKSg)jmpNjGRB?8wQ*tM#)udeCTfhD7y*&r|CJ$;jj#E7?(qI|&v09j6n>me;dikF zQ$@6h>>^y^%IZ3e2={hy(_-^uwm{4v(sVP9>PFl%n=x-jv1FddqB)3JGl4tqF&xOh z0vqjyys#CbL)3t0aMs<`@RtLvXk+t@_Zt)JKt{Be<*E z@P}tZ*RRn)+fIh59VgewFn*hTxbBX_?(T!w1)^ezsUVhhE#Ivqr%Cym_0kTK2{J-` zKZ#?(j3J;0c=j-Ms}SC*IzXM_J2m*Kt1zo8@JpZKyn;}pM@bh6Qtu}|ymEU`r1}t1 zek?1-Odn5GElSO56wpVAvHVQxTdA{hsUkJRlbkP@UU-ZMrVZ9gHQ=50Vvl(iQgDoM z)u5QX*VSvf^_)&{ZjCK}KHM8j^m9ZDF-5B6%F_hi4(2_be@Cx%>M zJSKZN78R!6@)3nIJBq@*R-_gVAVqm_S)EJvD#1Q&u`aT~nAwL^>W-61`rBvu(A|(j zkGSXKJu6Mxa@B}W%8Q3QTeIgIzXR0+u{88mK+04EHr{Db?W6-4tZ~2y;0^mUshX&5 zg5 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/features/dark/Frame.svg b/packages/website/static/img/features/dark/Frame.svg new file mode 100644 index 000000000000..4338c48c63e4 --- /dev/null +++ b/packages/website/static/img/features/dark/Frame.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/features/dark/Hand.svg b/packages/website/static/img/features/dark/Hand.svg new file mode 100644 index 000000000000..32944efcfa41 --- /dev/null +++ b/packages/website/static/img/features/dark/Hand.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/features/light/Buildings.svg b/packages/website/static/img/features/light/Buildings.svg new file mode 100644 index 000000000000..8c4b9939b42a --- /dev/null +++ b/packages/website/static/img/features/light/Buildings.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/features/light/Frame.svg b/packages/website/static/img/features/light/Frame.svg new file mode 100644 index 000000000000..542e199ecdbc --- /dev/null +++ b/packages/website/static/img/features/light/Frame.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/static/img/features/light/Hand.svg b/packages/website/static/img/features/light/Hand.svg new file mode 100644 index 000000000000..b11ebbf1c589 --- /dev/null +++ b/packages/website/static/img/features/light/Hand.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +