First commit to add auto theme capabilities.

Signed-off-by: Eduard Itrich <eduard.itrich@porsche.de>
on-behalf-of: @porscheofficial <open_source_office@porsche.de>

content/docs/contributing.mdx

@@ -7,7 +7,7 @@ descriptionShort: How we contribute to open-source projects
 
 ## How we contribute to open-source projects
 
-<PInlineNotification theme="dark" dismissButton={false}>
+<PInlineNotification theme="auto" dismissButton={false}>
   The purpose of this document is to provide transparency on how Porsche is
   contributing to open-source projects and the standards we're endorsing. The
   intended audience is both interested visitors as well as employees of Porsche
@@ -22,7 +22,7 @@ limited to contributing code but should also embrace non-code contributions such
 as design, translations, bug reporting, UX Improvement, recruiting, testing,
 documentation, project and community management, communication and many more.
 Our employees are provided with all means and information on our contribution
-policy in our <PLinkPure theme="dark" icon="lock" underline="true"
+policy in our <PLinkPure theme="auto" icon="lock" underline="true"
 href="https://skyway.porsche.com/confluence/display/OSO/Contribution+Guide">
 corporate wiki.</PLinkPure>
 

content/docs/creating.mdx

@@ -7,7 +7,7 @@ descriptionShort: How we publish and manage new open-source projects
 
 ## How we manage new open-source projects
 
-<PInlineNotification theme="dark" dismissButton={false}>
+<PInlineNotification theme="auto" dismissButton={false}>
   The purpose of this document is to provide transparency on how Porsche is
   managing new open-source projects and the standards we're endorsing to foster
   healthy communities. The intended audience is both interested visitors as well
@@ -18,7 +18,7 @@ descriptionShort: How we publish and manage new open-source projects
 
 We support and encourage our employees to launch and maintain new FOSS projects.
 Our employees can find more information on our contribution policy in our
-<PLinkPure theme="dark" icon="lock" underline="true"
+<PLinkPure theme="auto" icon="lock" underline="true"
 href="https://skyway.porsche.com/confluence/display/OSO/Contribution+Guide">corporate wiki.</PLinkPure>
 
 ### Our GitHub flow
@@ -37,7 +37,7 @@ with a minimal set of the following branch protection rules:
 More information on our GitHub flow can be found in the [Porsche Development
 Guidance.](https://devguidance.porsche.com/coding/vcs/git-branching-model/#nowadays-widely-adopted-github-flow)
 
-<PInlineNotification theme="dark" dismissButton={false}>
+<PInlineNotification theme="auto" dismissButton={false}>
 To contribute to an open-source project maintained by Porsche, please fork the
 repository, commit your changes to a separate branch and get them merged into
 the default branch via a reviewed pull request. More information on how to
@@ -49,7 +49,7 @@ particular project.
 
 The following files and documents are generally included in all our open-source projects: 
 
-1. A pull request template <PTag theme="dark">.github/PULL_REQUEST_TEMPLATE.md</PTag>:
+1. A pull request template <PTag theme="auto">.github/PULL_REQUEST_TEMPLATE.md</PTag>:
 
    ```markdown
    ### Pull Request Checklist
@@ -65,18 +65,18 @@ The following files and documents are generally included in all our open-source
    always required.
 
 2. The unmodified license text of the FOSS project in a file named <PTag
-   theme="dark">LICENSE.md</PTag>.
+   theme="auto">LICENSE.md</PTag>.
 
-3. A <PTag theme="dark">README.md</PTag> that introduces and explains the FOSS
+3. A <PTag theme="auto">README.md</PTag> that introduces and explains the FOSS
    project. We're following the [makeareadme.com](https://makeareadme.com/)
    template for writing good READMEs.
 
-4. A file <PTag theme="dark">CONTRIBUTING.md</PTag> that explains how to contribute to
+4. A file <PTag theme="auto">CONTRIBUTING.md</PTag> that explains how to contribute to
    the FOSS project. 
 
 5. If third-party components are distributed as a bundled
    release, a compulsory Open Source Software Notice in a file named
-   <PTag theme="dark">NOTICE.txt</PTag>.
+   <PTag theme="auto">NOTICE.txt</PTag>.
 
 ### Fostering a welcoming community
 

content/static/FOSS_MOVEMENT.mdx

@@ -1,6 +1,6 @@
 <PDisplay
   tag="h2"
-  theme="dark"
+  theme="auto"
   align="center"
   size="small"
   className={"keyvalues"}

package.json

@@ -19,8 +19,8 @@
     "test:ci": "yarn contentlayer:build && yarn prettier:ci && yarn tsc --noEmit --noEmitHelpers && yarn lint:ci"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "3.6.1",
-    "@porsche-design-system/components-react": "3.6.1",
+    "@porsche-design-system/components-js": "3.8.0",
+    "@porsche-design-system/components-react": "3.8.0",
     "@primer/octicons": "19.6.0",
     "contentlayer": "0.3.4",
     "date-fns": "2.30.0",

src/app/blog/[...slug]/page.tsx

@@ -87,7 +87,7 @@ const BlogPage: React.FC<PageProps> = ({ params }: PageProps) => {
 
       <Section spacing="none">
         <Textblock className={s.descriptionShort}>
-          <PText theme="dark" size="large" align="center">
+          <PText theme="auto" size="large" align="center">
             {blog.descriptionShort}
           </PText>
         </Textblock>

src/app/globals.scss

@@ -1,11 +1,13 @@
 @use "@porsche-design-system/components-js/styles" as *;
 
 :root {
-  --app-background: #{$pds-theme-dark-background-base};
+  --app-color: #{$pds-theme-light-primary};
+  --app-background: #{$pds-theme-light-background-base};
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
+    --app-color: #{$pds-theme-dark-primary};
     --app-background: #{$pds-theme-dark-background-base};
   }
 }
@@ -22,7 +24,7 @@ body {
 }
 
 body {
-  color: $pds-theme-dark-primary;
+  color: var(--app-color);
   background: var(--app-background);
 }
 

src/app/not-found.tsx

@@ -11,10 +11,10 @@ const NotFound: React.FC = () => {
         imageSrc={heroImage}
         imageAlt="AI generated Porsche Taycan"
       />
-      <PText theme="dark" size="middle" align="center">
+      <PText theme="auto" size="middle" align="center">
         This page could not be found.
       </PText>
-      <PText theme="dark" size="middle" align="center">
+      <PText theme="auto" size="middle" align="center">
         We can only apologize for the 404. Our favorite is 911.
       </PText>
     </>

src/app/page.tsx

@@ -40,7 +40,7 @@ const Home: React.FC = () => {
       />
       <Section id="foss-movement" spacing="none">
         <Textblock className={s.intro}>
-          <PText theme="dark" size="x-large" align="center">
+          <PText theme="auto" size="x-large" align="center">
             With the Porsche FOSS Movement, we are continuing our open-source
             journey and creating a common understanding of values, principles
             and goals - in all teams, all subsidiaries and across all national
@@ -59,7 +59,7 @@ const Home: React.FC = () => {
         <PCarousel
           slidesPerPage={{ base: 1, s: 2, l: 3 }}
           heading={projects.heading}
-          theme="dark"
+          theme="auto"
           width="extended"
           alignHeader="center"
           rewind={false}
@@ -78,7 +78,7 @@ const Home: React.FC = () => {
         </PCarousel>
       </Section>
       <Section id="blog" grid={false}>
-        <PHeading theme="dark" align="center" size="x-large">
+        <PHeading theme="auto" align="center" size="x-large">
           Contributor Stories
         </PHeading>
         <BlogsSection isFeatured showHeading={false} />
@@ -87,7 +87,7 @@ const Home: React.FC = () => {
         <PCarousel
           slidesPerPage={{ base: 1, s: 2 }}
           heading={news.heading}
-          theme="dark"
+          theme="auto"
           alignHeader="center"
           rewind={false}
           width="extended"
@@ -104,11 +104,11 @@ const Home: React.FC = () => {
         </PCarousel>
       </Section>
       <Section id="documentation" className={s.documentation}>
-        <PHeading theme="dark" align="center" size="x-large">
+        <PHeading theme="auto" align="center" size="x-large">
           Documentation
         </PHeading>
         <Textblock className={s.text}>
-          <PText theme="dark" size="medium" align="center">
+          <PText theme="auto" size="medium" align="center">
             Our <a href="/docs">growing documentation</a> provides transparency
             on how Porsche is contributing to open source and the standards we
             are endorsing for new projects to foster healthy communities.

src/components/01_atoms/MdxComponents.tsx

@@ -7,6 +7,7 @@ import {
   PInlineNotification,
   PLinkPure,
   PTag,
+  PText,
   PTextList,
   PTextListItem,
 } from "@porsche-design-system/components-react/ssr";
@@ -43,7 +44,7 @@ const components = {
     <PHeading
       align="center"
       size={{ base: "large", s: "x-large" }}
-      theme="dark"
+      theme="auto"
       tag="h1"
     >
       {children}
@@ -53,7 +54,7 @@ const components = {
     <PHeading
       size={{ base: "medium", s: "large" }}
       align="left"
-      theme="dark"
+      theme="auto"
       tag="h2"
     >
       {children}
@@ -63,7 +64,7 @@ const components = {
     <PHeading
       size={{ base: "small", s: "medium" }}
       align="left"
-      theme="dark"
+      theme="auto"
       tag="h3"
     >
       {children}
@@ -73,7 +74,7 @@ const components = {
     <PHeading
       size={{ base: "small", s: "small" }}
       align="left"
-      theme="dark"
+      theme="auto"
       tag="h4"
     >
       {children}
@@ -83,17 +84,17 @@ const components = {
     <PHeading
       size={{ base: "small", s: "small" }}
       align="left"
-      theme="dark"
+      theme="auto"
       tag="h5"
     >
       {children}
     </PHeading>
   ),
   ul: ({ children }: { children: React.ReactNode }) => (
-    <PTextList theme="dark">{children}</PTextList>
+    <PTextList theme="auto">{children}</PTextList>
   ),
   ol: ({ children }: { children: React.ReactNode }) => (
-    <PTextList theme="dark" type="numbered">
+    <PTextList theme="auto" type="numbered">
       {children}
     </PTextList>
   ),
@@ -108,10 +109,15 @@ const components = {
   a: ({ children, ...props }: { children: React.ReactNode }) => (
     // @ts-expect-error expected?
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    <PLinkPure theme="dark" underline icon="none" href={props.href}>
+    <PLinkPure theme="auto" underline icon="none" href={props.href}>
       {children}
     </PLinkPure>
   ),
+  p: ({ children }: { children: React.ReactNode }) => (
+    <p>
+      <PText theme="auto">{children}</PText>
+    </p>
+  ),
 };
 
 interface MdxProps {

src/components/02_molecules/author/author.tsx

@@ -32,15 +32,15 @@ export const Author: React.FC<AuthorProps> = ({
         )}
 
         <span className={s.content}>
-          <PText ellipsis size="medium" theme="dark" className={s.title}>
+          <PText ellipsis size="medium" theme="auto" className={s.title}>
             {name}
           </PText>
 
-          <PText theme="dark" className={s.description}>
+          <PText theme="auto" className={s.description}>
             {description}
           </PText>
         </span>
-        {!!slug && <PIcon theme="dark" className={s.icon} />}
+        {!!slug && <PIcon theme="auto" className={s.icon} />}
       </Component>
     </Section>
   );

src/components/02_molecules/editOnGithub/EditOnGithub.tsx

@@ -18,7 +18,7 @@ export const EditOnGithub: React.FC<EditOnGithubProps> = ({ file }) => {
         href={url.href}
         variant="secondary"
         iconSource="/assets/octicons/mark-github.svg"
-        theme="dark"
+        theme="auto"
       >
         Edit on GitHub
       </PLink>

src/components/02_molecules/footer/Footer.tsx

@@ -103,48 +103,48 @@ export const Footer: React.FC = () => {
   return (
     <footer className={s.footer}>
       <div className={s.left}>
-        <PText size="large" theme="dark">
+        <PText size="large" theme="auto">
           Porsche Company
         </PText>
         <ul className={s.content} id={s["company-links"]}>
           {links.map((link) => (
             <li key={link.url}>
-              <PLinkPure theme="dark" icon="none">
+              <PLinkPure theme="auto" icon="none">
                 <Link href={{ pathname: link.url }}>{link.name}</Link>
               </PLinkPure>
             </li>
           ))}
         </ul>
       </div>
       <div className={s.middle}>
-        <PText size="large" theme="dark">
+        <PText size="large" theme="auto">
           Contact
         </PText>
         <div className={s.content}>
-          <PText theme="dark">Do you have any questions?</PText>
+          <PText theme="auto">Do you have any questions?</PText>
 
           <PLink
             href="mailto:open_source_office@porsche.de"
-            theme="dark"
+            theme="auto"
             variant="secondary"
           >
             Contact Us
           </PLink>
         </div>
       </div>
       <div className={s.right}>
-        <PText size="large" theme="dark">
+        <PText size="large" theme="auto">
           Social Media
         </PText>
         <div className={s.content}>
-          <PText theme="dark">Get in touch with us on social media.</PText>
+          <PText theme="auto">Get in touch with us on social media.</PText>
 
           <ul>
             {linksSocial.map((link) => (
               <li className={s.inline} key={link.url}>
                 <PLink
                   href={link.url}
-                  theme="dark"
+                  theme="auto"
                   variant="secondary"
                   icon={link.icon}
                   hideLabel
@@ -157,12 +157,12 @@ export const Footer: React.FC = () => {
           </ul>
         </div>
       </div>
-      <PDivider className={s.divider} theme="dark" />
+      <PDivider className={s.divider} theme="auto" />
       <div className={s.notice}>
         <div className={s.linkBar}>
           © 2023 Dr. Ing. h.c. F. Porsche AG.{" "}
           {linksNotice.map((link) => (
-            <PLinkPure key={link.url} theme="dark" icon="none" underline>
+            <PLinkPure key={link.url} theme="auto" icon="none" underline>
               <Link href={{ pathname: link.url }}>{link.name}.</Link>
             </PLinkPure>
           ))}
@@ -175,7 +175,7 @@ export const Footer: React.FC = () => {
       </div>
       <div className={s["made-with"]}>
         Made with{" "}
-        <PLinkPure theme="dark" icon="none">
+        <PLinkPure theme="auto" icon="none">
           <Link
             href={{
               pathname:
@@ -188,7 +188,7 @@ export const Footer: React.FC = () => {
           </Link>
         </PLinkPure>{" "}
         and{" "}
-        <PLinkPure theme="dark" icon="none">
+        <PLinkPure theme="auto" icon="none">
           <Link
             href={{
               pathname: "https://designsystem.porsche.com/latest/",