feat: design tokens

CHANGELOG.md

@@ -38,6 +38,7 @@
 
 
 
+
 # [2.13.0](https://github.com/italia/bootstrap-italia/compare/v2.12.1...v2.13.0) (2025-01-23)
 
 

_includes/docs-navbar.html

@@ -26,7 +26,7 @@ <h2 class="bd-logo-subtitle">Il tema Bootstrap 5 per <span class="d-none d-sm-in
           href="https://github.com/italia/bootstrap-italia/releases/download/v{{ site.current_version }}/bootstrap-italia.zip"
           aria-label="Download">
           <small class="pe-2 m-0">v{{ site.current_version }}</small>
-          <svg class="icon icon-sm icon-light">
+          <svg class="icon icon-sm icon-inverse">
             <use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-download"
               xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-download"></use>
           </svg><span class="visually-hidden">Download</span>
@@ -36,7 +36,7 @@ <h2 class="bd-logo-subtitle">Il tema Bootstrap 5 per <span class="d-none d-sm-in
         <a title="Repository GitHub di Bootstrap Italia" data-toggle="tooltip"
           class="nav-link d-flex align-items-center" href="{{ site.repo }}" target="_blank" rel="noopener noreferrer"
           aria-label="GitHub">
-          <svg class="icon icon-sm icon-light">
+          <svg class="icon icon-sm icon-inverse">
             <use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-github"
               xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-github"></use>
           </svg><span class="visually-hidden">GitHub</span>

_includes/esempi/comuni/footer.html

@@ -238,7 +238,7 @@ <h3 class="visually-hidden">Sezione Link Utili</h3>
 </footer>
 
 <a href="#" aria-hidden="true" tabindex="-1" data-attribute="back-to-top" class="back-to-top">
-  <svg class="icon icon-light">
+  <svg class="icon icon-inverse">
     <use xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-arrow-up"></use>
   </svg>
 </a>

_includes/footer.html

@@ -19,20 +19,20 @@
         <div class="footer-social col-12 col-md-4 text-white text-end pt-2">
           <span class="d-none d-sm-inline">Seguici su Designers Italia: <br /></span>
           <a class="p-2 text-white" href="https://designers.italia.it/" title="Sito di Designers Italia" target="_blank"
-            ><svg class="icon icon-sm icon-light align-top">
+            ><svg class="icon icon-sm icon-inverse align-top">
               <use
                 href="{{ site.baseurl }}/dist/svg/sprites.svg#it-designers-italia"
                 xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-designers-italia"
               ></use></svg
             ><span class="visually-hidden">Sito di Designers Italia</span></a
           >
           <a class="p-2 text-white" href="https://twitter.com/DesignersITA" title="Designers Italia - Twitter" target="_blank"
-            ><svg class="icon icon-sm icon-light align-top">
+            ><svg class="icon icon-sm icon-inverse align-top">
               <use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-twitter" xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-twitter"></use></svg
             ><span class="visually-hidden">Designers Italia - Twitter</span></a
           >
           <a class="p-2 text-white" href="https://medium.com/designers-italia" title="Designers Italia - Medium" target="_blank"
-            ><svg class="icon icon-sm icon-light align-top">
+            ><svg class="icon icon-sm icon-inverse align-top">
               <use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-medium" xlink:href="{{ site.baseurl }}/dist/svg/sprites.svg#it-medium"></use></svg
             ><span class="visually-hidden">Designers Italia - Medium</span></a
           >

api/componenti/dropdown.json

@@ -5,7 +5,7 @@
     },
     {
         "name": "Con varianti di pulsanti",
-        "content": "\n\n<div class=\"btn-group\">\n  <button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n    Apri dropdown\n    <svg class=\"icon-expand icon icon-sm icon-light\"><use href=\"/dist/svg/sprites.svg#it-expand\"></use></svg>\n  </button>\n  <div class=\"dropdown-menu\">\n    <div class=\"link-list-wrapper\">\n      <ul class=\"link-list\">\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 1</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 2</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 3</span></a></li>\n      </ul>\n    </div>\n  </div>\n</div>\n<div class=\"btn-group\">\n  <button type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n    Apri dropdown\n    <svg class=\"icon-expand icon icon-sm icon-light\"><use href=\"/dist/svg/sprites.svg#it-expand\"></use></svg>\n  </button>\n  <div class=\"dropdown-menu\">\n    <div class=\"link-list-wrapper\">\n      <ul class=\"link-list\">\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 1</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 2</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 3</span></a></li>\n      </ul>\n    </div>\n  </div>\n</div>\n<div class=\"btn-group\">\n  <button type=\"button\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n    Apri dropdown\n    <svg class=\"icon-expand icon icon-sm icon-light\"><use href=\"/dist/svg/sprites.svg#it-expand\"></use></svg>\n  </button>\n  <div class=\"dropdown-menu\">\n    <div class=\"link-list-wrapper\">\n      <ul class=\"link-list\">\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 1</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 2</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 3</span></a></li>\n      </ul>\n    </div>\n  </div>\n</div>\n"
+        "content": "\n\n<div class=\"btn-group\">\n  <button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n    Apri dropdown\n    <svg class=\"icon-expand icon icon-sm icon-inverse\"><use href=\"/dist/svg/sprites.svg#it-expand\"></use></svg>\n  </button>\n  <div class=\"dropdown-menu\">\n    <div class=\"link-list-wrapper\">\n      <ul class=\"link-list\">\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 1</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 2</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 3</span></a></li>\n      </ul>\n    </div>\n  </div>\n</div>\n<div class=\"btn-group\">\n  <button type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n    Apri dropdown\n    <svg class=\"icon-expand icon icon-sm icon-inverse\"><use href=\"/dist/svg/sprites.svg#it-expand\"></use></svg>\n  </button>\n  <div class=\"dropdown-menu\">\n    <div class=\"link-list-wrapper\">\n      <ul class=\"link-list\">\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 1</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 2</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 3</span></a></li>\n      </ul>\n    </div>\n  </div>\n</div>\n<div class=\"btn-group\">\n  <button type=\"button\" class=\"btn btn-danger dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n    Apri dropdown\n    <svg class=\"icon-expand icon icon-sm icon-inverse\"><use href=\"/dist/svg/sprites.svg#it-expand\"></use></svg>\n  </button>\n  <div class=\"dropdown-menu\">\n    <div class=\"link-list-wrapper\">\n      <ul class=\"link-list\">\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 1</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 2</span></a></li>\n        <li><a class=\"dropdown-item list-item\" href=\"#\"><span>Azione 3</span></a></li>\n      </ul>\n    </div>\n  </div>\n</div>\n"
     },
     {
         "name": "Link",
@@ -53,6 +53,6 @@
     },
     {
         "name": "Menu dark",
-        "content": "\n\n<div class=\"dropdown-menu dark\">\n  <div class=\"link-list-wrapper\">\n    <div class=\"link-list-heading\">Intestazione</div>\n    <ul class=\"link-list\">\n      <li>\n        <a class=\"list-item right-icon active\" href=\"#\">\n          <span>Azione 1 (attivo)</span>\n          <svg class=\"icon icon-sm icon-light right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n      <li>\n        <a class=\"list-item right-icon\" href=\"#\">\n          <span>Azione 2</span>\n          <svg class=\"icon icon-sm icon-light right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n      <li>\n        <a class=\"list-item right-icon\" href=\"#\">\n          <span>Azione 3</span>\n          <svg class=\"icon icon-sm icon-light right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n      <!-- <li><span class=\"divider\"></span></li> -->\n      <li>\n        <a class=\"list-item right-icon\" href=\"#\">\n          <span>Azione 4</span>\n          <svg class=\"icon icon-sm icon-light right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n      <li>\n        <a class=\"list-item right-icon disabled\" href=\"#\" aria-disabled=\"true\">\n          <span>Azione 5 (disabilitato)</span>\n          <svg class=\"icon icon-sm icon-light right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>\n"
+        "content": "\n\n<div class=\"dropdown-menu dark\">\n  <div class=\"link-list-wrapper\">\n    <div class=\"link-list-heading\">Intestazione</div>\n    <ul class=\"link-list\">\n      <li>\n        <a class=\"list-item right-icon active\" href=\"#\">\n          <span>Azione 1 (attivo)</span>\n          <svg class=\"icon icon-sm icon-inverse right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n      <li>\n        <a class=\"list-item right-icon\" href=\"#\">\n          <span>Azione 2</span>\n          <svg class=\"icon icon-sm icon-inverse right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n      <li>\n        <a class=\"list-item right-icon\" href=\"#\">\n          <span>Azione 3</span>\n          <svg class=\"icon icon-sm icon-inverse right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n      <!-- <li><span class=\"divider\"></span></li> -->\n      <li>\n        <a class=\"list-item right-icon\" href=\"#\">\n          <span>Azione 4</span>\n          <svg class=\"icon icon-sm icon-inverse right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n      <li>\n        <a class=\"list-item right-icon disabled\" href=\"#\" aria-disabled=\"true\">\n          <span>Azione 5 (disabilitato)</span>\n          <svg class=\"icon icon-sm icon-inverse right\"><use href=\"/dist/svg/sprites.svg#it-star-outline\"></use></svg>\n        </a>\n      </li>\n    </ul>\n  </div>\n</div>\n"
     }
 ]

api/components_status.json

@@ -2,7 +2,7 @@
   "items": [
     {
       "amichevole con lettori di schermo": "PRONTO",
-      "angular Kit": "PRONTO",
+      "angular Kit": "DA RIVEDERE",
       "angular Kit - url": "https://italia.github.io/design-angular-kit/design-angular-kit#/componenti/collapse",
       "assignees": [
         "frmascia11y"
@@ -18,7 +18,7 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgMjtRg",
       "navigabile": "PRONTO",
-      "notes / More": "In Angular kit è sotto il componente Collapse. Uniformare? ",
+      "notes / Issues": "https://github.com/italia/design-angular-kit/issues/426",
       "react Kit": "PRONTO",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/story/documentazione-componenti-accordion--accordion",
       "status": "Todo",
@@ -45,7 +45,7 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgMjtas",
       "navigabile": "PRONTO",
-      "notes / More": "Funzionalità presente/documentata solo in BSI. Verificare.",
+      "notes / More": "Funzionalità presente/documentata solo in BSI.",
       "react Kit": "NON PRESENTE",
       "status": "Todo",
       "status a11y check": "Done",
@@ -98,8 +98,7 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgMjtb4",
       "navigabile": "PRONTO",
-      "notes / Issues": "https://github.com/italia/design-ui-kit/issues/114 — https://github.com/italia/design-angular-kit/issues/404",
-      "notes / More": "In React kit è una variante dentro Input. Uniformare?",
+      "notes / Issues": "https://github.com/italia/bootstrap-italia/issues/1387 — https://github.com/italia/design-ui-kit/issues/114 — https://github.com/italia/design-angular-kit/issues/404",
       "react Kit": "PRONTO",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/story/documentazione-form-input--input-autocomplete-con-dati-accessibile",
       "status": "Todo",
@@ -126,7 +125,7 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgMjwTI",
       "navigabile": "PRONTO",
-      "notes / More": "In Angular kit manca la variante con testo.",
+      "notes / Issues": "https://github.com/italia/design-angular-kit/issues/427",
       "react Kit": "PRONTO",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/docs/documentazione-componenti-avatar--documentazione",
       "status": "Todo",
@@ -208,13 +207,14 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgMjwUg",
       "navigabile": "PRONTO",
-      "notes / More": "Altri problemi evidenziati (future lavorazioni): Segnalati problemi con uso di colori saturi per lo sfondo, che rendono elemento troppo simile a pulsante, quando invece non è cliccabile. Manca variante \"Bianca\" in UI Kit Italia. Uniformare spaziatura interna tra UI Kit Italia e framework di sviluppo.",
+      "notes / Issues": "https://github.com/italia/design-ui-kit/issues/181",
+      "notes / More": "Segnalati problemi con uso di colori saturi per lo sfondo, che rendono elemento troppo simile a pulsante, quando invece non è cliccabile.",
       "react Kit": "PRONTO",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/docs/documentazione-componenti-badge--documentazione",
       "status": "Todo",
       "status a11y check": "Done",
       "title": "`Badge` - check a11y e status",
-      "uI Kit Italia": "PRONTO",
+      "uI Kit Italia": "DA COMPLETARE VARIANTI",
       "uI Kit Italia - url": "https://www.figma.com/community/file/1105848677422572920",
       "visivamente accessibile": "PRONTO"
     },
@@ -289,8 +289,7 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgMjwV0",
       "navigabile": "PRONTO",
-      "notes / Issues": "https://github.com/italia/bootstrap-italia/issues/1259",
-      "notes / More": "Da verificare uso solo colore per veicolare semantica nei pulsanti nelle varianti colore ",
+      "notes / Issues": "https://github.com/italia/bootstrap-italia/issues/1259 — https://github.com/italia/bootstrap-italia/issues/1388",
       "react Kit": "PRONTO",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/docs/documentazione-componenti-button--documentazione",
       "status": "Todo",
@@ -319,7 +318,7 @@
       "id": "PVTI_lADOAOqloM4AcXblzgMjwWE",
       "navigabile": "IN REVIEW",
       "notes / Issues": "https://github.com/italia/bootstrap-italia/issues/1158",
-      "notes / More": "In UI kit Italia sono previsti angoli arrotondati per le varianti base. Uniformare?",
+      "notes / More": "In UI kit Italia sono previsti angoli arrotondati per le varianti base. Uniformare? (Se TOKENS facile in BSIsennò SQUADRATO in UI KIT)",
       "react Kit": "DA RIVEDERE A11Y",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/docs/documentazione-componenti-callout--documentazione",
       "status": "Todo",
@@ -348,7 +347,6 @@
       "id": "PVTI_lADOAOqloM4AcXblzgMjwWQ",
       "navigabile": "PRONTO",
       "notes / Issues": "https://github.com/italia/bootstrap-italia/issues/1071 — https://github.com/italia/design-ui-kit/issues/115 — https://github.com/italia/bootstrap-italia/issues/1100",
-      "notes / More": "Valutare di fare completamente nuova versione e deprecare le attuali. Nomi e varianti nei diversi framework.",
       "react Kit": "DA RIVEDERE A11Y",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/docs/documentazione-componenti-cards--documentazione",
       "status": "Todo",
@@ -376,8 +374,7 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgMjwWs",
       "navigabile": "IN REVIEW",
-      "notes / Issues": "https://github.com/italia/bootstrap-italia/issues/1161",
-      "notes / More": "Da fare in React Kit: c'è una precedente issue chiusa da Stale qui: https://github.com/italia/design-react-kit/issues/395",
+      "notes / Issues": "https://github.com/italia/bootstrap-italia/issues/1161 — https://github.com/italia/design-react-kit/issues/1148",
       "react Kit": "DA FARE",
       "status": "Todo",
       "status a11y check": "Done",
@@ -404,7 +401,7 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgSeKRg",
       "navigabile": "PRONTO",
-      "notes / More": "In angular nella variante Gruppi è presente un link nella label da rimuovere.",
+      "notes / Issues": "https://github.com/italia/design-angular-kit/issues/428",
       "react Kit": "PRONTO",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/docs/documentazione-form-checkbox--documentazione",
       "status a11y check": "Done",
@@ -690,12 +687,12 @@
     },
     {
       "amichevole con lettori di schermo": "PRONTO",
-      "angular Kit": "PRONTO",
+      "angular Kit": "DA RIVEDERE",
       "angular Kit - url": "https://italia.github.io/design-angular-kit/design-angular-kit#/componenti/form-input",
       "assignees": [
         "Fupete"
       ],
-      "bootstrap Italia": "PRONTO",
+      "bootstrap Italia": "DA RIVEDERE",
       "bootstrap Italia - url": "https://italia.github.io/bootstrap-italia/docs/form/input/",
       "comprensibile": "PRONTO",
       "content": {
@@ -706,13 +703,14 @@
       },
       "id": "PVTI_lADOAOqloM4AcXblzgMjwas",
       "navigabile": "PRONTO",
+      "notes / Issues": "https://github.com/italia/bootstrap-italia/issues/1387",
       "notes / More": "In UI Kit Italia è presente anche il componente \"To be\". Decidere roadmap. ",
-      "react Kit": "PRONTO",
+      "react Kit": "DA RIVEDERE",
       "react Kit - url": "https://italia.github.io/design-react-kit/?path=/docs/documentazione-form-input--documentazione",
       "status": "Todo",
       "status a11y check": "Done",
       "title": "`Input` - check a11y e status",
-      "uI Kit Italia": "PRONTO",
+      "uI Kit Italia": "DA RIVEDERE",
       "uI Kit Italia - url": "https://www.figma.com/community/file/1105848677422572920",
       "visivamente accessibile": "PRONTO"
     },