diff --git a/.github/workflows/package-ui.yml b/.github/workflows/package-ui.yml index 0f74a8b..258c51c 100644 --- a/.github/workflows/package-ui.yml +++ b/.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}}" }' diff --git a/build/ui-bundle.zip b/build/ui-bundle.zip index 50e2beb..a5a8f36 100644 Binary files a/build/ui-bundle.zip and b/build/ui-bundle.zip differ diff --git a/src/css/colors.css b/src/css/colors.css index 4eee5b5..d2832a8 100644 --- a/src/css/colors.css +++ b/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; diff --git a/src/css/header.css b/src/css/header.css index f48c7e1..4f947ae 100644 --- a/src/css/header.css +++ b/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 { diff --git a/src/css/nav.css b/src/css/nav.css index e48b646..97bf82a 100644 --- a/src/css/nav.css +++ b/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); } diff --git a/src/css/site.css b/src/css/site.css index e4fe72d..7c3d952 100644 --- a/src/css/site.css +++ b/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"; diff --git a/src/css/theme-blue.css b/src/css/theme-ivory.css similarity index 53% rename from src/css/theme-blue.css rename to src/css/theme-ivory.css index 93940e0..93e3953 100644 --- a/src/css/theme-blue.css +++ b/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 */ diff --git a/src/css/theme-petrol.css b/src/css/theme-onyx.css similarity index 67% rename from src/css/theme-petrol.css rename to src/css/theme-onyx.css index ca50678..42bf36e 100644 --- a/src/css/theme-petrol.css +++ b/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 */ diff --git a/src/css/theme-red.css b/src/css/theme-red.css deleted file mode 100644 index ff90ea1..0000000 --- a/src/css/theme-red.css +++ /dev/null @@ -1,28 +0,0 @@ -:root.theme-red { - /* theme colors */ - --primary-color: var(--plentyRedsThree); - --secondary-color: var(--plentyLightGrey); - --highlight-color: var(--plentyBluesThree); - --accent-color: var(--plentyWhite); - /* font colors */ - --primary-font-color: var(--plentyWhite); - --secondary-font-color: var(--plentyBlack); - /* admonition colors */ - --caution-color: var(--plentyWhite); - --important-color: var(--plentyYellowsTwo); - --note-color: var(--plentyBluesThree); - --tip-color: var(--plentyGreen); - --warning-color: var(--plentyRedsTwo); - /* 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 */ - --hljs-background: #fefefe; - --hljs-font-color: #545454; - --hljs-comment: #696969; - --hljs-red: #d91e18; - --hljs-orange: #aa5d00; - --hljs-yellow: #aa5d00; - --hljs-green: #008000; - --hljs-blue: #007faa; - --hljs-purple: #7928a1; -} diff --git a/src/css/vars.css b/src/css/vars.css index 332e6fc..e334831 100644 --- a/src/css/vars.css +++ b/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); diff --git a/src/img/PlentyONE_Logo_PlentyBlue_RGB.svg b/src/img/PlentyONE_Logo_PlentyBlue_RGB.svg new file mode 100644 index 0000000..7248df2 --- /dev/null +++ b/src/img/PlentyONE_Logo_PlentyBlue_RGB.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/img/PlentyONE_Logo_White_RGB.svg b/src/img/PlentyONE_Logo_White_RGB.svg new file mode 100644 index 0000000..fe937f5 --- /dev/null +++ b/src/img/PlentyONE_Logo_White_RGB.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/js/13-theme-picker.js b/src/js/13-theme-picker.js index 025c63c..6d1502c 100644 --- a/src/js/13-theme-picker.js +++ b/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) }) diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs index 1a4f702..b3e11cc 100644 --- a/src/partials/footer-content.hbs +++ b/src/partials/footer-content.hbs @@ -66,19 +66,16 @@
diff --git a/src/partials/header-content-developers.hbs b/src/partials/header-content-developers.hbs index f7e04a9..f013077 100644 --- a/src/partials/header-content-developers.hbs +++ b/src/partials/header-content-developers.hbs @@ -1,5 +1,5 @@
- +
@@ -26,10 +26,9 @@ aria-expanded="false"> Theme -
- Clear Sky - Midnight - Sunrise +
+ Onyx + Ivory
diff --git a/src/partials/header-content-knowledge.hbs b/src/partials/header-content-knowledge.hbs index f162e09..2590f39 100644 --- a/src/partials/header-content-knowledge.hbs +++ b/src/partials/header-content-knowledge.hbs @@ -1,5 +1,5 @@
- +
@@ -15,9 +15,8 @@ Theme
- Clear Sky - Midnight - Sunrise + Onyx + Ivory