docs: Playground New Branding & Logo (SAP#9331)

Author: ilhan007

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: [
         {

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<React.SVGProps<SVGSVGElement> & {
+    title?: string;
+  }>;
+  SVGDark?: React.ComponentType<React.SVGProps<SVGSVGElement> & {
+    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 (
     <div className="feature">
-      <img className="feature__image" src={colorMode === "dark" ? srcContrast : src} alt={title} />
+      {colorMode === "light" ? <SVG className='feature__image'/> : <SVGDark className='feature__image'/>}
       <h2 className="feature__title">{title}</h2>
       <p className="feature__desc">{description}</p>
     </div>

packages/website/src/components/HomepageFeatures/styles.css

@@ -18,7 +18,8 @@
 }
 
 .feature__image {
-  height: 8rem;
+  height: 10rem;
+  width: 10rem;
 }
 
 .feature {

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;

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;
   }
 }

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" ? <LogoWater className={styles.logoMain} /> : <LogoFire className={styles.logoMain} />
+  );
+} 
+
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { colorMode } = useColorMode();
+
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div  className={clsx('container', styles.container)}>
-        <UI5Logo className={styles.logoMain}></UI5Logo>
+        <Logo colorMode={colorMode} />
         <Heading as="h1" className={clsx('hero__title', styles.heroTitle)}>
-        <span className={styles.heroTitle__UI5}>UI5</span> Web Components
+          <span className={styles.heroTitle__UI5}>UI5</span> Web Components
         </Heading>
+
         <p className={clsx('hero__subtitle', styles.heroSubtitle)}>
          An <span className={styles.hero__subtitle__part1}><b>open-source</b></span> UI components library for building <span className={styles.hero__subtitle__part2}><b>enterprise-ready</b></span> apps!
         </p>
@@ -44,8 +54,8 @@ function HomepageHeader() {
 function Banner() {
   return (
     <div className="alert alert--info" role="alert" style={{fontSize: "1.5rem", textAlign: "center"}}>
-        🎉&nbsp;Get ready for the <b>UI5 Web Components 2.0!</b>
-          <div>Discover the <b><a href="https://github.com/SAP/ui5-webcomponents/issues/8608">timelines and the exciting features in store!
+        🎉&nbsp;<b>UI5 Web Components 2.0 is here!</b>
+          <div>Discover the <b><a href="/blog/releases/announcing-rc-v2/"> all the exciting features in store!
             </a></b>&nbsp;🎉
           </div>
     </div>