From 2c98180dabf0a3241f752a6b9e56c48ba2aab0c2 Mon Sep 17 00:00:00 2001 From: Gil Forcada Codinachs Date: Wed, 13 Dec 2023 16:13:31 +0100 Subject: [PATCH 1/8] feat(classic UI): how to get a minimal barceloneta integration Explain all the steps to get a custom CSS bundle out of barceloneta theme to style the core/backend parts of Plone Classic UI. --- docs/classic-ui/theming/from-scratch.md | 79 +++++++++++++++++++++++++ 1 file changed, 79 insertions(+) diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index 9d2110e07..b95296bcd 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -123,6 +123,85 @@ yarn dist - Import Boostrap (as basis) +#### Minimal backend styling + +When creating a theme from scratch, it still makes sense (and saves time) to reuse the barceloneta theme for: + +- Plone toolbar +- add/edit forms +- control panels + +To be able to do so: + +- create a new CSS file on your theme like this: + +```scss +// plone variables (used in toolbar) +// Plone specific colors +//colors +$state-draft-color: #fab82a!default; // lime-yellow //draft is visible +$state-pending-color: #e2e721!default; // orange +$state-private-color: #c4183c!default; // red +$state-internal-color: #fab82a!default; // is draft +$state-internally-published-color: #883dfa!default; // is intranet +$plone-link-color: #007bb1!default; //plone blue made slightly darker for wcag 2.0 +$spacer: 1rem!default; + +// Toolbar +$plone-toolbar-bg: rgba(0, 0, 0, 0.9); +$plone-toolbar-submenu-bg: rgba(20, 20, 20, 0.95); +$plone-toolbar-font-primary: "Roboto Condensed", sans-serif; +$plone-toolbar-font-secondary: "Roboto", sans-serif; +$plone-toolbar-separator-color: rgba(255, 255, 255, 0.17); +$plone-toolbar-link: $plone-link-color; +$plone-toolbar-text-color: rgba(255, 255, 255, 0.9); +$plone-toolbar-submenu-text-color: #fff; +$plone-toolbar-submenu-header-color: lighten(#000, 80%); + +$plone-toolbar-locked-color: var(--bs-warning); // is intranet + +$plone-toolbar-width: 220px; +$plone-toolbar-width-collapsed: calc($spacer * 2.25); +$plone-toolbar-top-height: calc($spacer * 2.5); + +@import "bootstrap/scss/bootstrap"; + +@import "@plone/plonetheme-barceloneta-base/scss/toolbar"; +@import "@plone/plonetheme-barceloneta-base/scss/controlpanels"; +@import "@plone/plonetheme-barceloneta-base/scss/forms"; +``` + +!!! tip + See all the [barceloneta SCSS files](https://github.com/plone/plonetheme.barceloneta/tree/master/scss) + that are available and import the ones that you want to use. + +Add `@plone/plonetheme-barceloneta-base` as a dependency: + +```shell +yarn add @plone/plonetheme-barceloneta-base +``` + +Add a script on `package.json` to compile the CSS: + +```json + "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css" +``` + +!!! tip + Look at [plonetheme.barcelonta package.json](https://github.com/plone/plonetheme.barceloneta/blob/master/package.json) + for a few more scripts to prefix and minify your CSS to get a production ready bundle. + +Run the compilation: + +```shell +yarn run css-compile-main +``` + +Finally, register the [CSS as a bundle](#bundle-registration). + +With this, you will save yourself quite some work on styling the toolbar, the add/edit forms and controlpanels, +while keeping the rest of your theming on your own. + #### Templates - Add `z3c.jbot` overrides From c5d29ebeb108c396e28219bc5b0f9bc20b62e5e1 Mon Sep 17 00:00:00 2001 From: Gil Forcada Codinachs Date: Wed, 13 Dec 2023 16:21:58 +0100 Subject: [PATCH 2/8] fix admonitions --- docs/classic-ui/theming/from-scratch.md | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index b95296bcd..33bc8d26b 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -171,9 +171,10 @@ $plone-toolbar-top-height: calc($spacer * 2.5); @import "@plone/plonetheme-barceloneta-base/scss/forms"; ``` -!!! tip - See all the [barceloneta SCSS files](https://github.com/plone/plonetheme.barceloneta/tree/master/scss) - that are available and import the ones that you want to use. +```{tip} +See all the [barceloneta SCSS files](https://github.com/plone/plonetheme.barceloneta/tree/master/scss) +that are available and import the ones that you want to use. +``` Add `@plone/plonetheme-barceloneta-base` as a dependency: @@ -187,10 +188,11 @@ Add a script on `package.json` to compile the CSS: "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css" ``` -!!! tip - Look at [plonetheme.barcelonta package.json](https://github.com/plone/plonetheme.barceloneta/blob/master/package.json) - for a few more scripts to prefix and minify your CSS to get a production ready bundle. - +```{tip} +Look at [plonetheme.barcelonta package.json](https://github.com/plone/plonetheme.barceloneta/blob/master/package.json) +for a few more scripts to prefix and minify your CSS to get a production ready bundle. +``` + Run the compilation: ```shell From bb4bea29672659c3e7f2471fac7094737da42e6f Mon Sep 17 00:00:00 2001 From: Gil Forcada Codinachs Date: Wed, 13 Dec 2023 16:32:03 +0100 Subject: [PATCH 3/8] fix the reference --- docs/classic-ui/theming/from-scratch.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index 33bc8d26b..e841be69d 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -66,6 +66,8 @@ prefix = /++theme++plonetheme.munich doctype = ``` +(classic-ui-from-scratch-bundle-registration-label) + ### Bundle registration ```xml @@ -199,7 +201,7 @@ Run the compilation: yarn run css-compile-main ``` -Finally, register the [CSS as a bundle](#bundle-registration). +Finally, register the bundle: {ref}`classic-ui-from-scratch-bundle-registration-label`. With this, you will save yourself quite some work on styling the toolbar, the add/edit forms and controlpanels, while keeping the rest of your theming on your own. From 5df1d66331e0071d074871f7ccb7fa0d2ae31730 Mon Sep 17 00:00:00 2001 From: Gil Forcada Codinachs Date: Wed, 13 Dec 2023 16:41:54 +0100 Subject: [PATCH 4/8] typo --- docs/classic-ui/theming/from-scratch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index e841be69d..edf9cd26a 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -66,7 +66,7 @@ prefix = /++theme++plonetheme.munich doctype = ``` -(classic-ui-from-scratch-bundle-registration-label) +(classic-ui-from-scratch-bundle-registration-label)= ### Bundle registration From 02659194b3ac22fa3087090ccb804dc701b89756 Mon Sep 17 00:00:00 2001 From: Steve Piercy Date: Thu, 14 Dec 2023 01:27:34 -0800 Subject: [PATCH 5/8] Clean up English and MyST syntax and grammar --- docs/classic-ui/theming/from-scratch.md | 138 ++++++++++++------------ 1 file changed, 68 insertions(+), 70 deletions(-) diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index edf9cd26a..7fb722fe5 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -122,89 +122,87 @@ yarn dist - Tweak basic settings like rounded corners, shadows, and so on. - Set custom fonts - Define your own stuff -- Import Boostrap (as basis) +- Import Bootstrap (as basis) #### Minimal backend styling -When creating a theme from scratch, it still makes sense (and saves time) to reuse the barceloneta theme for: - -- Plone toolbar -- add/edit forms -- control panels - -To be able to do so: - -- create a new CSS file on your theme like this: - -```scss -// plone variables (used in toolbar) -// Plone specific colors -//colors -$state-draft-color: #fab82a!default; // lime-yellow //draft is visible -$state-pending-color: #e2e721!default; // orange -$state-private-color: #c4183c!default; // red -$state-internal-color: #fab82a!default; // is draft -$state-internally-published-color: #883dfa!default; // is intranet -$plone-link-color: #007bb1!default; //plone blue made slightly darker for wcag 2.0 -$spacer: 1rem!default; - -// Toolbar -$plone-toolbar-bg: rgba(0, 0, 0, 0.9); -$plone-toolbar-submenu-bg: rgba(20, 20, 20, 0.95); -$plone-toolbar-font-primary: "Roboto Condensed", sans-serif; -$plone-toolbar-font-secondary: "Roboto", sans-serif; -$plone-toolbar-separator-color: rgba(255, 255, 255, 0.17); -$plone-toolbar-link: $plone-link-color; -$plone-toolbar-text-color: rgba(255, 255, 255, 0.9); -$plone-toolbar-submenu-text-color: #fff; -$plone-toolbar-submenu-header-color: lighten(#000, 80%); - -$plone-toolbar-locked-color: var(--bs-warning); // is intranet - -$plone-toolbar-width: 220px; -$plone-toolbar-width-collapsed: calc($spacer * 2.25); -$plone-toolbar-top-height: calc($spacer * 2.5); - -@import "bootstrap/scss/bootstrap"; - -@import "@plone/plonetheme-barceloneta-base/scss/toolbar"; -@import "@plone/plonetheme-barceloneta-base/scss/controlpanels"; -@import "@plone/plonetheme-barceloneta-base/scss/forms"; -``` +When you create a theme from scratch, it is convenient to reuse the Barceloneta theme for: -```{tip} -See all the [barceloneta SCSS files](https://github.com/plone/plonetheme.barceloneta/tree/master/scss) -that are available and import the ones that you want to use. -``` +- Plone toolbar +- add and edit forms +- control panels -Add `@plone/plonetheme-barceloneta-base` as a dependency: +To do so, follow this guide. -```shell -yarn add @plone/plonetheme-barceloneta-base -``` +- Create a new CSS file in your theme, such as the following. -Add a script on `package.json` to compile the CSS: + ```scss + // plone variables (used in toolbar) + // Plone specific colors + //colors + $state-draft-color: #fab82a!default; // lime-yellow //draft is visible + $state-pending-color: #e2e721!default; // orange + $state-private-color: #c4183c!default; // red + $state-internal-color: #fab82a!default; // is draft + $state-internally-published-color: #883dfa!default; // is intranet + $plone-link-color: #007bb1!default; //plone blue made slightly darker for wcag 2.0 + $spacer: 1rem!default; + + // Toolbar + $plone-toolbar-bg: rgba(0, 0, 0, 0.9); + $plone-toolbar-submenu-bg: rgba(20, 20, 20, 0.95); + $plone-toolbar-font-primary: "Roboto Condensed", sans-serif; + $plone-toolbar-font-secondary: "Roboto", sans-serif; + $plone-toolbar-separator-color: rgba(255, 255, 255, 0.17); + $plone-toolbar-link: $plone-link-color; + $plone-toolbar-text-color: rgba(255, 255, 255, 0.9); + $plone-toolbar-submenu-text-color: #fff; + $plone-toolbar-submenu-header-color: lighten(#000, 80%); + + $plone-toolbar-locked-color: var(--bs-warning); // is intranet + + $plone-toolbar-width: 220px; + $plone-toolbar-width-collapsed: calc($spacer * 2.25); + $plone-toolbar-top-height: calc($spacer * 2.5); + + @import "bootstrap/scss/bootstrap"; + + @import "@plone/plonetheme-barceloneta-base/scss/toolbar"; + @import "@plone/plonetheme-barceloneta-base/scss/controlpanels"; + @import "@plone/plonetheme-barceloneta-base/scss/forms"; + ``` -```json - "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css" -``` + ```{tip} + See all the available [Barceloneta SCSS files](https://github.com/plone/plonetheme.barceloneta/tree/master/scss), and import the ones that you want to use. + ``` -```{tip} -Look at [plonetheme.barcelonta package.json](https://github.com/plone/plonetheme.barceloneta/blob/master/package.json) -for a few more scripts to prefix and minify your CSS to get a production ready bundle. -``` - -Run the compilation: +- Add `@plone/plonetheme-barceloneta-base` as a dependency. -```shell -yarn run css-compile-main -``` + ```shell + yarn add @plone/plonetheme-barceloneta-base + ``` + +- Add a script in {file}`package.json` to compile the CSS. + + ```json + "css-compile-main": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css plone.scss:../static/plone.css" + ``` + + ```{tip} + Look at [`plonetheme.barcelonta`'s {file}`package.json`](https://github.com/plone/plonetheme.barceloneta/blob/master/package.json) for a few more scripts that can prefix and minify your CSS and get a bundle for use in production. + ``` + +- Run the compilation. + + ```shell + yarn run css-compile-main + ``` + +- Finally, {ref}`register the bundle `. -Finally, register the bundle: {ref}`classic-ui-from-scratch-bundle-registration-label`. +With this guide, you will save yourself quite some work on styling the toolbar, the add and edit forms, and control panels, while keeping the rest of your theming separate. -With this, you will save yourself quite some work on styling the toolbar, the add/edit forms and controlpanels, -while keeping the rest of your theming on your own. #### Templates From 6f69a476c789309e5ec9569d3c62aa8fbf329a1b Mon Sep 17 00:00:00 2001 From: Gil Forcada Codinachs Date: Fri, 8 Mar 2024 12:47:31 +0100 Subject: [PATCH 6/8] Update docs/classic-ui/theming/from-scratch.md Co-authored-by: Yuri --- docs/classic-ui/theming/from-scratch.md | 33 +++---------------------- 1 file changed, 4 insertions(+), 29 deletions(-) diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index 7fb722fe5..c9477d901 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -138,35 +138,10 @@ To do so, follow this guide. - Create a new CSS file in your theme, such as the following. ```scss - // plone variables (used in toolbar) - // Plone specific colors - //colors - $state-draft-color: #fab82a!default; // lime-yellow //draft is visible - $state-pending-color: #e2e721!default; // orange - $state-private-color: #c4183c!default; // red - $state-internal-color: #fab82a!default; // is draft - $state-internally-published-color: #883dfa!default; // is intranet - $plone-link-color: #007bb1!default; //plone blue made slightly darker for wcag 2.0 - $spacer: 1rem!default; - - // Toolbar - $plone-toolbar-bg: rgba(0, 0, 0, 0.9); - $plone-toolbar-submenu-bg: rgba(20, 20, 20, 0.95); - $plone-toolbar-font-primary: "Roboto Condensed", sans-serif; - $plone-toolbar-font-secondary: "Roboto", sans-serif; - $plone-toolbar-separator-color: rgba(255, 255, 255, 0.17); - $plone-toolbar-link: $plone-link-color; - $plone-toolbar-text-color: rgba(255, 255, 255, 0.9); - $plone-toolbar-submenu-text-color: #fff; - $plone-toolbar-submenu-header-color: lighten(#000, 80%); - - $plone-toolbar-locked-color: var(--bs-warning); // is intranet - - $plone-toolbar-width: 220px; - $plone-toolbar-width-collapsed: calc($spacer * 2.25); - $plone-toolbar-top-height: calc($spacer * 2.5); - - @import "bootstrap/scss/bootstrap"; +import "@plone/plonetheme-barceloneta-base/scss/variables.colors.plone"; +import "@plone/plonetheme-barceloneta-base/scss/variables.colors.dark.plone"; +import "@plone/plonetheme-barceloneta-base/scss/root_variables"; +import "bootstrap/scss/bootstrap"; @import "@plone/plonetheme-barceloneta-base/scss/toolbar"; @import "@plone/plonetheme-barceloneta-base/scss/controlpanels"; From 05ea28559962a29434df9b9f8cbaceb3cd4d9a02 Mon Sep 17 00:00:00 2001 From: Gil Forcada Codinachs Date: Fri, 8 Mar 2024 12:48:55 +0100 Subject: [PATCH 7/8] Update docs/classic-ui/theming/from-scratch.md --- docs/classic-ui/theming/from-scratch.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index c9477d901..6b4ef2fc0 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -138,10 +138,10 @@ To do so, follow this guide. - Create a new CSS file in your theme, such as the following. ```scss -import "@plone/plonetheme-barceloneta-base/scss/variables.colors.plone"; -import "@plone/plonetheme-barceloneta-base/scss/variables.colors.dark.plone"; -import "@plone/plonetheme-barceloneta-base/scss/root_variables"; -import "bootstrap/scss/bootstrap"; + import "@plone/plonetheme-barceloneta-base/scss/variables.colors.plone"; + import "@plone/plonetheme-barceloneta-base/scss/variables.colors.dark.plone"; + import "@plone/plonetheme-barceloneta-base/scss/root_variables"; + import "bootstrap/scss/bootstrap"; @import "@plone/plonetheme-barceloneta-base/scss/toolbar"; @import "@plone/plonetheme-barceloneta-base/scss/controlpanels"; From b1e1c74a0239b70da47a1d34368a15d7e35c75e6 Mon Sep 17 00:00:00 2001 From: Gil Forcada Codinachs Date: Fri, 8 Mar 2024 12:50:12 +0100 Subject: [PATCH 8/8] Update docs/classic-ui/theming/from-scratch.md --- docs/classic-ui/theming/from-scratch.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/classic-ui/theming/from-scratch.md b/docs/classic-ui/theming/from-scratch.md index 6b4ef2fc0..688431e6c 100644 --- a/docs/classic-ui/theming/from-scratch.md +++ b/docs/classic-ui/theming/from-scratch.md @@ -138,10 +138,10 @@ To do so, follow this guide. - Create a new CSS file in your theme, such as the following. ```scss - import "@plone/plonetheme-barceloneta-base/scss/variables.colors.plone"; - import "@plone/plonetheme-barceloneta-base/scss/variables.colors.dark.plone"; - import "@plone/plonetheme-barceloneta-base/scss/root_variables"; - import "bootstrap/scss/bootstrap"; + @import "@plone/plonetheme-barceloneta-base/scss/variables.colors.plone"; + @import "@plone/plonetheme-barceloneta-base/scss/variables.colors.dark.plone"; + @import "@plone/plonetheme-barceloneta-base/scss/root_variables"; + @import "bootstrap/scss/bootstrap"; @import "@plone/plonetheme-barceloneta-base/scss/toolbar"; @import "@plone/plonetheme-barceloneta-base/scss/controlpanels";