merge main

.github/workflows/package-ui.yml

@@ -47,7 +47,7 @@ jobs:
       - name: Rebuild developers site
         uses: peter-evans/repository-dispatch@ce5485de42c9b2622d2ed064be479e8ed65e76f4
         with:
-          token: ${{ secrets.PUBLIC_PAT_CICD4_PUBLIC }}
+          token: ${{ secrets.ORGA_PAT_CICD1_FULL_REPO_AND_PACKAGES }}
           repository: plentymarkets/plenty-developers-docs
           event-type: UIBundleUpdate
           client-payload: '{ "repository": "${{github.repository}}" }'
@@ -56,7 +56,7 @@ jobs:
       - name: Rebuild knowledge site
         uses: peter-evans/repository-dispatch@ce5485de42c9b2622d2ed064be479e8ed65e76f4
         with:
-          token: ${{ secrets.PUBLIC_PAT_CICD4_PUBLIC }}
+          token: ${{ secrets.ORGA_PAT_CICD1_FULL_REPO_AND_PACKAGES }}
           repository: plentymarkets/plenty-manual-docs
           event-type: UIBundleUpdate
           client-payload: '{ "repository": "${{github.repository}}" }'

src/css/colors.css

@@ -19,6 +19,24 @@ html:root {
     --plentyBlack: #000;
     --plentyLightGrey: #F1F1F1;
     --plentyWhite: #FFF;
+    /* brand colors new */
+    --plentyOneBlueA: #062633;
+    --plentyOneBlueB: #31687D;
+    --plentyOneBlueC: #72CBEE;
+    --plentyOneBlueD: #D5EFFA;
+    --plentyOneLimeY: #828E2B;
+    --plentyOneLimeZ: #C7DF1C;
+    --plentyOneLimeA: #EDFF6C;
+    --plentyOneLimeB: #FBFFE2;
+    --plentyOneNudeY: #998772;
+    --plentyOneNudeZ: #CEC2B3;
+    --plentyOneNudeA: #E9DFD3;
+    --plentyOneNudeB: #F6F2ED;
+    /* signal colors */
+    --plentyOneSignalPrimary: #72CBEE;
+    --plentyOneSignalAdd: #8ECC2E;
+    --plentyOneSignalAlert: #FF3458;
+    --plentyOneSignalWarning: #FB8732;
     /* supplementary colors */
     --plentyOrangesOne: #ED4109;
     --plentyOrangesTwo: #F7660A;

src/css/header.css

@@ -257,7 +257,7 @@ body:has(header .navbar .container-fluid #banner) {
   margin-top: 1.5rem;
   cursor: pointer;
   background: var(--dropdown-background-color);
-  color: white;
+  color: var(--dropdown-color);
   padding: 10px;
   min-width: max-content;
 }
@@ -300,11 +300,7 @@ button:focus {
 
 .navbar .left .logo img {
   width: auto;
-  height: 35px;
-}
-
-.navbar .left .logo-knowledge img {
-  height: 80px!important;
+  height: 45px;
 }
 
 .navbar .left .logo:last-child img {

src/css/nav.css

@@ -151,6 +151,7 @@ html.is-clipped--nav {
 }
 
 span.nav-text, a.nav-link {
+  color: var(--primary-font-color);
   margin-left: 0.3rem;
 }
 
@@ -191,9 +192,9 @@ span.nav-text, a.nav-link {
 .is-current-page > .nav-link,
 .is-current-page > .nav-text {
   font-weight: 500;
-  border-left: 3px solid var(--plentyWhite);
+  border-left: 3px solid var(--primary-font-color);
   padding-left: 0.5em;
-  color: var(--link-font-color);
+  color: var(--primary-font-color);
 }
 
 .nav-panel-explore {
@@ -227,6 +228,7 @@ span.nav-text, a.nav-link {
 }
 
 .nav-panel-explore .context .title {
+  color: var(--primary-font-color);
   font-size: calc(18 / var(--rem-base) * 1rem);
   font-weight: bold;
 }
@@ -236,8 +238,8 @@ span.nav-text, a.nav-link {
   background-repeat: no-repeat;
   background-position: right 0.5rem top 50%;
   background-size: auto 0.75em;
+  color: var(--primary-font-color);
   padding: 0 1.5rem 0 0;
-  filter: brightness(3);
 }
 
 .nav-panel-explore .components {
@@ -269,6 +271,7 @@ span.nav-text, a.nav-link {
 }
 
 .nav-panel-explore .component .title {
+  color: var(--primary-font-color);
   font-weight: var(--body-font-weight-bold);
 }
 

src/css/site.css

@@ -1,7 +1,6 @@
 @import "colors.css";
-@import "theme-blue.css";
-@import "theme-petrol.css";
-@import "theme-red.css";
+@import "theme-onyx.css";
+@import "theme-ivory.css";
 @import "vars.css";
 @import "fonts.css";
 @import "base.css";

src/css/theme-blue.css → src/css/theme-ivory.css

@@ -1,18 +1,18 @@
-:root.theme-blue {
+:root.theme-ivory {
   /* theme colors */
-  --primary-color: var(--plentyBluesThree);
-  --secondary-color: var(--plentyWhite);
-  --highlight-color: var(--plentyBluesOne);
-  --accent-color: var(--plentyGreysFive);
+  --primary-color: var(--plentyOneNudeA);
+  --secondary-color: var(--plentyOneNudeB);
+  --highlight-color: var(--plentyOneBlueA);
+  --accent-color: var(--plentyOneNudeZ);
   /* font colors */
-  --primary-font-color: var(--plentyWhite);
-  --secondary-font-color: var(--plentyBlack);
+  --primary-font-color: var(--plentyOneBlueA);
+  --secondary-font-color: var(--plentyOneBlueA);
   /* admonition colors */
   --caution-color: var(--plentyWhite);
-  --important-color: var(--plentyYellowsThree);
-  --note-color: var(--plentyBluesTwo);
-  --tip-color: var(--plentyGreen);
-  --warning-color: var(--plentyRedsThree);
+  --important-color: var(--plentyOneSignalWarning);
+  --note-color: var(--plentyOneSignalPrimary);
+  --tip-color: var(--plentyOneSignalAdd);
+  --warning-color: var(--plentyOneSignalAlert);
   /* highlightjs colors: a11y-light theme
   Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
   @author: ericwbailey */

src/css/theme-petrol.css → src/css/theme-onyx.css

@@ -1,18 +1,18 @@
-:root.theme-petrol {
+:root.theme-onyx {
   /* theme colors */
-  --primary-color: var(--plentyBluesTwo);
-  --secondary-color: var(--plentyBluesOne);
+  --primary-color: var(--plentyOneBlueB);
+  --secondary-color: var(--plentyOneBlueA);
   --highlight-color: var(--plentyWhite);
-  --accent-color: var(--plentyBluesTwo);
+  --accent-color: var(--plentyOneBlueB);
   /* font colors */
   --primary-font-color: var(--plentyWhite);
   --secondary-font-color: var(--plentyWhite);
   /* admonition colors */
   --caution-color: var(--plentyWhite);
-  --important-color: var(--plentyYellowsThree);
-  --note-color: var(--plentyBluesThree);
-  --tip-color: var(--plentyGreen);
-  --warning-color: var(--plentyRedsThree);
+  --important-color: var(--plentyOneSignalWarning);
+  --note-color: var(--plentyOneSignalPrimary);
+  --tip-color: var(--plentyOneSignalAdd);
+  --warning-color: var(--plentyOneSignalAlert);
   /* highlightjs colors: a11y-dark theme
   Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
   @author: ericwbailey */

src/css/vars.css

@@ -26,6 +26,7 @@ html {
     --panel-border-color: var(--primary-color);
     --scrollbar-thumb-color: var(--plentyGreysTwo);
     /* header */
+    --dropdown-color: var(--primary-font-color);
     --dropdown-background-color: var(--primary-color);
     /* navbar */
     --navbar-font-color: var(--secondary-font-color);
@@ -62,7 +63,7 @@ html {
     /* toolbar */
     --toolbar-font-color: var(--secondary-font-color);
     --toolbar-action-background: var(--primary-color);
-    --toolbar-action-color: var(--plentyWhite);
+    --toolbar-action-color: var(--secondary-font-color);
     --toolbar-border-color: var(--panel-border-color);
     --toolbar-muted-color: var(--color-gray-30);
     --toolbar-font-size: calc(13 / var(--rem-base) * 1rem);
@@ -73,7 +74,7 @@ html {
     --toc-font-color: var(--secondary-font-color);
     --toc-background-color: var(--accent-color);
     --toc-heading-font-color: var(--doc-font-color);
-    --toc-left-border: var(--primary-color);
+    --toc-left-border: var(--secondary-font-color);
     --toc-focused-color: var(--doc-font-color);
     --toc-border-color: var(--highlight-color);
     --toc-line-height: 1.2;
@@ -144,16 +145,16 @@ html {
     --feedback-form-textarea-background: var(--secondary-color);
     --feedback-form-textarea-border: var(--highlight-color);
     --feedback-form-textarea-color: var(--highlight-color);
-    --feedback-form-button-background-like: var(--plentyBluesThree);
+    --feedback-form-button-background-like: var(--plentyOneSignalPrimary);
     --feedback-form-button-color-like: var(--plentyWhite);
-    --feedback-form-button-border-like: var(--plentyBluesThree);
-    --feedback-form-button-background-dislike: var(--plentyRedsThree);
+    --feedback-form-button-border-like: var(--plentyOneSignalPrimary);
+    --feedback-form-button-background-dislike: var(--plentyOneSignalAlert);
     --feedback-form-button-color-dislike: var(--plentyWhite);
-    --feedback-form-button-border-dislike: var(--plentyRedsThree);
+    --feedback-form-button-border-dislike: var(--plentyOneSignalAlert);
     /* footer */
     --footer-line-height: var(--doc-line-height);
     --footer-background: var(--footer-bg-color);
-    --footer-background-color: var(--plentyGreysOne);
+    --footer-background-color: var(--plentyOneBlueA);
     --footer-font-color: var(--doc-font-color);
     --footer-link-font-color: var(--plentyWhite);
     --footer-link-hover-color: var(--link_hover-font-color);

src/js/13-theme-picker.js

@@ -1,12 +1,37 @@
+function getLogoName (themeName) {
+  const theme = window.localStorage.getItem('theme')
+
+  if (theme === 'theme-onyx') {
+    return 'PlentyONE_Logo_White_RGB.svg'
+  }
+
+  return 'PlentyONE_Logo_PlentyBlue_RGB.svg'
+}
+
 function setTheme (themeName) {
   window.localStorage.setItem('theme', themeName)
   document.documentElement.className = themeName
+
+  const logoImg = document.getElementById('logo-img')
+  const locale = window.location.pathname.split('/')[1] ? `/${window.location.pathname.split('/')[1]}/` : '/'
+  const logoName = getLogoName(themeName)
+  logoImg.src = `${window.location.origin}${locale}_/img/${logoName}`
+}
+
+function getTheme () {
+  return window.localStorage.getItem('theme')
+}
+
+function isCompliantTheme (themeName) {
+  const allowedThemes = ['theme-ivory', 'theme-onyx']
+  return allowedThemes.includes(themeName)
 }
 
 document.addEventListener('DOMContentLoaded', () => {
   const host = window.location.host
-  const defaultTheme = (host === 'developers.plentymarkets.com') ? 'theme-petrol' : 'theme-red'
-  const storedTheme = window.localStorage.getItem('theme')
+  const defaultTheme = (host === 'developers.plentymarkets.com') ? 'theme-onyx' : 'theme-ivory'
+  const storedTheme = getTheme()
+  const isCompliant = isCompliantTheme(storedTheme)
 
-  storedTheme ? setTheme(storedTheme) : setTheme(defaultTheme)
+  storedTheme && isCompliant ? setTheme(storedTheme) : setTheme(defaultTheme)
 })