Ciao,
su MacOS sono riuscito ad installare il toolkit correttamente e riesco a compilare i sorgenti (nodejs 8.9.4 e npm 5.6.0) .
Se lancio il comando npm run watch e modifico i sorgenti, vedo da terminale che qualcosa “gira” …ma in realtà sul browser non vedo le modifiche, neanche ricaricando la pagina. Per vederle devo rilanciare lo stesso comando o fare npm run build.
Cosa può essere?
@charly71 non sono riuscito a replicare il problema. è possibile che sia lento nella ricompilazione dei CSS e anche quando a terminale stampa qualcosa sia necessario aspettare qualche altro secondo ?
(che browser ?)
Ho provato sia con Chrome che con Safari: in realtà è solo estremamente lento… e non sempre mi prende le modifiche. Mi è capitato ad esempio modificando la variabile --Color-focus nel tema pac/index.css e visualizzando il template comuni–default: la colonna centrale “L’Amministrazione” rimane dello stesso colore.
Non trovo inoltre la lista completa di tutte le variabili CSS che è possibile modificare nell’override del tema. Sarebbe utile averla, soprattutto per i template di pagina o moduli più comuni.
Grazie!
non mi è chiara la correlazione tra Color-focus e il colore della colonna centrale che dovebbe essere hardcoded nel nome della classe. Ad esempio qui:
https://italia.github.io/design-web-toolkit/components/preview/comuni.html
è u-color-compl-80.
questa è la lista delle variabili che è possibile sovrascrivere ottenuta eseguendo
find -name \*.css -exec egrep ' \-\-(.+)\;' {} \;
--Accordion-border-color: var(--Color-grey-30);
--Accordion-link-arrow-up: svg-load("icons/img/SVG/collapse.svg", fill=var(--Color-50));
--Accordion-link-arrow-down: svg-load("icons/img/SVG/expand.svg", fill=var(--Color-50));
--Accordion-link-plus: svg-load("icons/img/SVG/plus.svg", fill=var(--Color-50));
--Accordion-link-minus: svg-load("icons/img/SVG/minus.svg", fill=var(--Color-50));
--Accordion-link-padding: 0.5em;
--Accordion-link-arrow-width: 1em;
--Alert-error-bg: #ffcbcb;
--Alert-error-color: #1e1212;
--Alert-error-border: #b50000;
--Alert-error-background-image: inline("icons/img/SVG/error.svg");
--Alert-warning-bg: #ffef9f;
--Alert-warning-color: #4f4310;
--Alert-warning-border: #1e1212;
--Alert-warning-background-image: inline("icons/img/SVG/warning.svg");
--Alert-success-bg: #dff0d8;
--Alert-success-color: #274d28;
--Alert-success-border: #d6e9c6;
--Alert-success-background-image: inline("icons/img/SVG/check.svg");
--Alert-info-bg: #c6f3f5;
--Alert-info-color: #004446;
--Alert-info-border: #1e1212;
--Alert-info-background-image: inline("icons/img/SVG/info.svg");
--Button-default-bg: #65dde0;
--Button-default-color: #004a4d;
--Button-default-border: #50d8dc;
--Button-danger-bg: #b50000;
--Button-danger-color: #fff;
--Button-danger-border: #f00;
--Button-info-bg: #fff;
--Button-info-color: #003e54;
--Button-info-border: #ccc;
--Callout-color-must: #f4e6f5;
--Callout-color-should: #d1e7ff;
--Callout-color-could: #ebf5ef;
--Callout-color-example: #e6e5e3;
--Callout-border-top-color: #aaa;
--Callout-space-unit: 0.5em;
--Dropdown-arrow-size: 1rem;
--Form-input-border-color: #ccc;
--Form-input-border-radius: 0;
--Form-state-invalid-border-color: #b50000;
--Form-state-invalid-label-color: #1c2024;
--Form-state-invalid-message-color: #1c2024;
--Form-state-warning-border-color: #e5ce23;
--Form-state-warning-label-color: #1c2024;
--Form-state-warning-message-color: #1c2024;
--Form-label-checked-background: #c6f3f5;
--Form-border-width: 0.4rem;
--Form-choose-height: 1em;
--Form-select-arrow-width: 0.8em;
--Form-select-arrow: inline("icons/img/SVG/expand.svg");
--Form-radio: svg-load("icons/img/SVG/radio-button.svg", stroke=var(--Color-teal-50));
--Form-radio-checked: svg-load("icons/img/SVG/radio-button-checked.svg", stroke=var(--Color-teal-50));
--Form-checkbox: svg-load("icons/img/SVG/checkbox.svg", stroke=var(--Color-teal-50));
--Form-checkbox-checked: svg-load("icons/img/SVG/checkbox-checked.svg", stroke=var(--Color-teal-50));
--Form-textarea-min-height: 10em;
--Forward-width: 3em;
--Forward-color: var(--Color-grey-20);
--Hamburger-width: 4.6rem;
--Hamburger-height: 1.2rem;
--Hamburger-pad: 0.2rem;
--Hero-height: 30em; /* 1 */
--Hero-background-img: url("//placehold.it/2000x500?text=placeholder");
--Linklist-border-color: #d8d8d8;
--Linklist-link-arrow-up: inline("icons/img/SVG/collapse.svg");
--Linklist-link-arrow-down: inline("icons/img/SVG/expand.svg");
--Linklist-link-padding: 0.5em;
--Linklist-link-arrow-width: 0.8em;
--Megamenu-arrow-width: 0.5em;
--Megamenu-subnav-width: 14em;
--Offcanvas-width: 22em;
--Offcanvas-max-width: 80%;
--Separator-skewY: skewY(2deg);
--Separator-height: 10rem;
--Separator-offset: 4rem;
--Separator-skewY: 2deg;
--Table-border-color: #d6dce3;
--Table-cell-pad-h: 0.5em;
--Table-cell-pad-v: 1em;
--Table-hover-color: #e5f1fa;
--Table-stripe-color: #f6f7f9;
--Timeline-padding: 3rem;
--Timeline-arrow-size: 1rem;
--Timeline-point-size: 10rem;
--Tooltip-border-color: #b4efef;
--Treeview-link-minWidth: 4em;
--Treeview-link-maxWidth: 6em;
--Treeview-link-padding: 2em;
--Treeview-link-handler-width: 15%;
--Treeview-link-arrow-width: 1em;
--Treeview-link-arrow-down: inline("icons/img/SVG/expand.svg");
--Treeview-link-arrow-up: inline("icons/img/SVG/collapse.svg");
--Treeview-link-plus: inline("icons/img/SVG/plus.svg");
--Treeview-link-minus: inline("icons/img/SVG/minus.svg");
--Footer-color-link: var(--Color-teal-50);
--Footer-background-color: var(--Color-95);
--Header-banner-bg: var(--Color-grey-80);
--Header-navbar-bg: var(--Color-50);
--Header-searchTrigger-bg: var(--Color-50);
--Header-languages-bg: var(--Color-grey-80);
--Header-activeLanguage-bg: var(--Color-80);
--Header-language-other-bg: var(--Color-white);
--Header-socialIcons-bg: var(--Color-white);
--Header-text-color: var(--Color-white);
--Header-search-maxWidth: 20em;
--Prose-color-text-primary: #1c2024;
--Prose-color-text-secondary: #5a6772;
--Prose-color-text-highlighted: #b2ebed;
--Prose-color-link: #06c;
--Prose-color-link-hover: #036;
--Prose-color-link-visited: #06c;
--Spid-font-ratio: 1.2em;
--Spid-img-height: 2.5em;
--Spid-img-width: 3em;
--Spid-idp-img-height: 2em;
--Spid-background: #06c;
--Spid-font-family: "Titillium Web"; /* [1] */
--Print-font-family: Georgia, "Times New Roman", Times, serif;
--Print-line-height: 1.5;
--Print-max-width: 960px;
--Print-font-size: 60%;
--Color-primary: #06c;
--Pac-font-family-sans: Titillium Web, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
--Border-size-unit: 0.1rem;
--Border-focus-color: #ff8c00;
--Border-soft-focus-color: #00c5ca;
--Color-primary: #111; /* [1] */
--Color-black: #000;
--Color-white: #fff;
--Color-grey-10: #f5f5f0;
--Color-grey-15: #f6f9fc;
--Color-grey-20: #eee;
--Color-grey-30: #ddd;
--Color-grey-40: #a5abb0;
--Color-grey-50: #5a6772;
--Color-grey-60: #444e57;
--Color-grey-80: #30373d;
--Color-grey-90: #1c2024;
--Color-teal-30: #00c5ca;
--Color-teal-50: #65dcdf;
--Color-teal-70: #004a4d;
--Color-focus: #ff8c00;
--Color-5: color(var(--Color-primary) l(+50%) s(-50%));
--Color-10: color(var(--Color-primary) l(+40%) s(-40%));
--Color-20: color(var(--Color-primary) l(+30%) s(-30%));
--Color-30: color(var(--Color-primary) l(+20%) s(-20%));
--Color-40: color(var(--Color-primary) l(+8%) s(-15%));
--Color-50: var(--Color-primary);
--Color-60: color(var(--Color-primary) l(-5%));
--Color-70: color(var(--Color-primary) l(-10%));
--Color-80: color(var(--Color-primary) l(-15%));
--Color-90: color(var(--Color-primary) l(-20%));
--Color-95: color(var(--Color-primary) l(-25%));
--Color-compl: color(var(--Color-primary) h(+180) s(100%) l(70%));
--Color-compl-5: color(var(--Color-primary) h(+180) s(20%) l(95%));
--Color-compl-10: color(var(--Color-primary) h(+180) s(30%) l(90%));
--Color-compl-80: color(var(--Color-primary) h(+180));
--Layout-container-wide: 144rem;
--Layout-container-wider: 168rem;
--Layout-container-medium: 128rem;
--Layout-container-small: 96rem;
--Layout-gutter: 0.8rem;
--Layout-gutter-wide: 2.4rem;
--Layout-prose-width: 32em;
--Spacing-unit-fixed: 0.4rem;
--Text-color-text-primary: #333;
--Text-color-text-secondary: #5a6772;Sì infatti… io tentavo di modificarne il colore, poi ho capito che è una specie di colore complementare calcolato partendo da quello principale… 
Scusami ma ci arrivo passo dopo passo!
Grazie per la lista, mi sarà molto utile.