├── CONTRIBUTING.md ├── .npmrc ├── .github ├── ISSUE_TEMPLATE │ ├── config.yml │ ├── apri-una-segnalazione.it.yaml │ └── open-an-issue.en.yaml └── workflows │ ├── build.yml │ └── publish-release.yml ├── .devcontainer ├── postCreateCommand.sh └── devcontainer.json ├── .npmrc-dist ├── AUTHORS ├── scripts └── create-release-attachment.sh ├── test-themes ├── app.js ├── css │ ├── toggle.css │ ├── vars.css │ └── style.css └── index.html ├── package.json ├── .gitignore ├── LICENSE ├── README.md ├── test-vars ├── css │ ├── styles-css-variables.css │ └── styles.css ├── scss │ └── styles.scss └── index.html ├── tokens ├── specific.json ├── semantic.json └── global.json └── dist ├── scss └── _variables.scss └── css └── variables.css /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | message="chore(release): %s :tada:" 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | -------------------------------------------------------------------------------- /.devcontainer/postCreateCommand.sh: -------------------------------------------------------------------------------- 1 | sudo chown -R node:node node_modules 2 | npm i 3 | npm i -g http-serve -------------------------------------------------------------------------------- /.npmrc-dist: -------------------------------------------------------------------------------- 1 | //registry.npmjs.org/:_authToken=${NODE_AUTH_TOKEN} 2 | registry=https://registry.npmjs.org/ 3 | always-auth=true 4 | message="chore(release): %s :tada:" 5 | -------------------------------------------------------------------------------- /AUTHORS: -------------------------------------------------------------------------------- 1 | (C) 2023 Dipartimento per la trasformazione digitale - Presidenza del Consiglio dei Ministri 2 | 3 | The version control system provides attribution for specific lines of code. 4 | -------------------------------------------------------------------------------- /scripts/create-release-attachment.sh: -------------------------------------------------------------------------------- 1 | mkdir -p ./design-tokens-italia 2 | cp -r css ./design-tokens-italia 3 | cp -r scss ./design-tokens-italia 4 | cp -r tokens ./design-tokens-italia 5 | zip -r ./design-tokens-italia.zip ./design-tokens-italia 6 | -------------------------------------------------------------------------------- /test-themes/app.js: -------------------------------------------------------------------------------- 1 | var toggleTheme = document.querySelector('.theme input'); 2 | var toggleColor = document.querySelector('.color input'); 3 | var body = document.querySelector('.body'); 4 | 5 | toggleTheme.onclick = function() { 6 | body.classList.toggle('dark'); 7 | } 8 | 9 | toggleColor.onclick = function() { 10 | body.classList.toggle('purple'); 11 | } -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build tokens 2 | on: 3 | push: 4 | branches: 5 | - main 6 | jobs: 7 | build: 8 | name: Build tokens 👷🏻‍♂️ 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v3 12 | - uses: actions/setup-node@v3 13 | with: 14 | node-version: 22 15 | - run: npm ci 16 | - run: npm run build 17 | -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DesignTokensItalia", 3 | "image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bookworm", 4 | "mounts": [ 5 | "source=${localWorkspaceFolderBasename}-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume" 6 | ], 7 | "postCreateCommand": "sh .devcontainer/postCreateCommand.sh", 8 | "customizations": { 9 | "vscode": { 10 | "extensions": ["github.vscode-pull-request-github"] 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "design-tokens-italia", 3 | "version": "1.3.2", 4 | "description": "Official repository of design tokens from Design System Italia", 5 | "author": "@italia", 6 | "main": "index.js", 7 | "scripts": { 8 | "build": "npm run clean && node build.js", 9 | "clean": "rm -rf dist" 10 | }, 11 | "license": "BSD-3-Clause", 12 | "type": "module", 13 | "devDependencies": { 14 | "style-dictionary": "^5.1.1" 15 | }, 16 | "files": [ 17 | "dist/css/", 18 | "dist/scss/", 19 | "tokens/" 20 | ], 21 | "dependencies": { 22 | "@tokens-studio/sd-transforms": "^2.0.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore dist files 2 | design-tokens-italia 3 | 4 | # Numerous always-ignore extensions 5 | *.diff 6 | *.err 7 | *.log 8 | *.orig 9 | *.rej 10 | *.swo 11 | *.swp 12 | *.vi 13 | *.zip 14 | *~ 15 | 16 | # OS or Editor folders 17 | ._* 18 | .cache 19 | .DS_Store 20 | .idea 21 | .project 22 | .settings 23 | .tmproj 24 | .publish 25 | *.esproj 26 | *.sublime-project 27 | *.sublime-workspace 28 | nbproject 29 | Thumbs.db 30 | .vscode 31 | 32 | # Komodo 33 | .komodotools 34 | *.komodoproject 35 | 36 | # Jekyll metadata and extra config file for `github` script 37 | .jekyll-cache 38 | .jekyll-metadata 39 | 40 | # Folders to ignore 41 | node_modules 42 | prepros-6.config 43 | 44 | # Changelog test 45 | changelog.txt 46 | 47 | # Ignore cache file from linters 48 | .eslintcache 49 | .stylelintcache 50 | -------------------------------------------------------------------------------- /.github/workflows/publish-release.yml: -------------------------------------------------------------------------------- 1 | name: Generate new release 2 | on: 3 | push: 4 | tags: 5 | - 'v1*' 6 | jobs: 7 | build: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v3 11 | with: 12 | fetch-depth: 0 13 | # Always release the tip of the default branch 14 | ref: main 15 | - name: Git config 16 | run: | 17 | git config user.name "${GITHUB_ACTOR}" 18 | git config user.email "${GITHUB_ACTOR}@users.noreply.github.com" 19 | - run: sudo apt-get update && sudo apt-get install -y zip 20 | - run: mv .npmrc-dist .npmrc 21 | - uses: actions/setup-node@v3 22 | with: 23 | node-version: 22 24 | - run: npm ci 25 | - run: npm run build 26 | - name: Publish package to NPM 27 | run: npm publish 28 | env: 29 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 30 | - run: sh ./scripts/create-release-attachment.sh 31 | - uses: ncipollo/release-action@v1 32 | with: 33 | artifacts: './design-tokens-italia.zip' 34 | token: ${{ secrets.GITHUB_TOKEN }} 35 | 36 | -------------------------------------------------------------------------------- /test-themes/css/toggle.css: -------------------------------------------------------------------------------- 1 | /* The toggle - the box around the slider */ 2 | .toggle { 3 | position: relative; 4 | display: inline-block; 5 | width: 60px; 6 | height: 34px; 7 | } 8 | 9 | /* Hide default HTML checkbox */ 10 | .toggle input { 11 | opacity: 0; 12 | width: 0; 13 | height: 0; 14 | } 15 | 16 | /* The slider */ 17 | .slider { 18 | position: absolute; 19 | cursor: pointer; 20 | top: 0; 21 | left: 0; 22 | right: 0; 23 | bottom: 0; 24 | background-color: #ccc; 25 | -webkit-transition: .4s; 26 | transition: .4s; 27 | } 28 | 29 | .slider:before { 30 | position: absolute; 31 | content: ""; 32 | height: 26px; 33 | width: 26px; 34 | left: 4px; 35 | bottom: 4px; 36 | background-color: white; 37 | -webkit-transition: .4s; 38 | transition: .4s; 39 | } 40 | 41 | input:checked + .slider { 42 | background-color: var(--link-color); 43 | } 44 | 45 | input:focus + .slider { 46 | box-shadow: 0 0 1px #2196F3; 47 | } 48 | 49 | input:checked + .slider:before { 50 | -webkit-transform: translateX(26px); 51 | -ms-transform: translateX(26px); 52 | transform: translateX(26px); 53 | } 54 | 55 | .toggle p { 56 | font-size: 0.66rem; 57 | position: absolute; 58 | bottom: -28px; 59 | } -------------------------------------------------------------------------------- /test-themes/css/vars.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --body-color-text: #333; 3 | --body-color-background: #fff; 4 | 5 | --header-color-text: #000; 6 | --header-color-background: #dadada; 7 | 8 | --link-color: #f00; 9 | --link-color-hover: rgb(160, 2, 2); 10 | 11 | --title-color: rgb(173, 68, 68); 12 | } 13 | 14 | :root .dark { 15 | --body-color-text: #fff; 16 | --body-color-background: #222; 17 | 18 | --header-color-text: #dadada; 19 | --header-color-background: #000; 20 | 21 | --link-color: rgb(255, 104, 104); 22 | --link-color-hover: #fd9b9b; 23 | 24 | --title-color: rgb(252, 152, 152); 25 | } 26 | 27 | :root .purple { 28 | --link-color: rgb(47, 0, 255); 29 | --link-color-hover: rgb(12, 2, 160); 30 | 31 | --title-color: rgb(68, 70, 173); 32 | } 33 | 34 | :root .dark.purple { 35 | --link-color: rgb(158, 136, 255); 36 | --link-color-hover: rgb(78, 65, 255); 37 | 38 | --title-color: rgb(148, 150, 255); 39 | } 40 | 41 | /* OS dark mode */ 42 | /*@media (prefers-color-scheme: dark) { 43 | :root { 44 | --body-color-text: #fff; 45 | --body-color-background: #222; 46 | 47 | --header-color-text: #dadada; 48 | --header-color-background: #000; 49 | 50 | --link-color: rgb(255, 104, 104); 51 | --link-color-hover: #fd9b9b; 52 | 53 | --title-color: rgb(252, 152, 152); 54 | } 55 | }*/ -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2023, the respective contributors, as shown by the AUTHORS file. 2 | 3 | Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 4 | 5 | 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 6 | 7 | 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 8 | 9 | 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. 10 | 11 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 12 | -------------------------------------------------------------------------------- /test-themes/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: var(--body-color-text); 3 | background-color: var(--body-color-background); 4 | font-family: Arial, Helvetica, sans-serif; 5 | font-size: 18px; 6 | margin: 0 auto; 7 | } 8 | 9 | a { 10 | color: var(--link-color); 11 | } 12 | 13 | a:hover { 14 | color: var(--link-color-hover); 15 | } 16 | 17 | header { 18 | color: var(--header-color-text); 19 | background-color: var(--header-color-background); 20 | padding: 24px; 21 | position: relative; 22 | } 23 | 24 | header .title { 25 | font-size: 3rem; 26 | font-weight: 700; 27 | text-align: center; 28 | color: var(--title-color); 29 | } 30 | 31 | header nav ul { 32 | padding: 0; 33 | margin: 16px 0 0; 34 | list-style-type: none; 35 | display: flex; 36 | justify-content: center; 37 | } 38 | 39 | header a { 40 | color: var(--header-color-text); 41 | text-decoration: none; 42 | font-weight: 700; 43 | margin: 0 16px; 44 | } 45 | 46 | header a:hover { 47 | color: var(--link-color); 48 | } 49 | 50 | header .toggle { 51 | position: absolute; 52 | top: 8px; 53 | right: 8px; 54 | } 55 | 56 | header .toggle.color { 57 | position: absolute; 58 | top: auto; 59 | bottom: 24px; 60 | } 61 | 62 | .container { 63 | max-width: 80%; 64 | margin: 32px auto; 65 | display: flex; 66 | justify-content: space-between; 67 | } 68 | 69 | main { 70 | width: 66%; 71 | } 72 | 73 | h1, h2, h3 { 74 | margin-top: 0; 75 | color: var(--title-color); 76 | } 77 | 78 | h2, h3 { 79 | margin-bottom: 4px; 80 | } 81 | 82 | p { 83 | line-height: 1.5; 84 | margin-top: 0; 85 | } 86 | 87 | aside { 88 | width: 25%; 89 | padding: 16px; 90 | background-color: var(--header-color-background); 91 | } 92 | 93 | aside p { 94 | font-size: 0.9rem; 95 | } 96 | 97 | aside ul { 98 | list-style-type: none; 99 | padding: 0; 100 | } 101 | 102 | aside ul li { 103 | margin-bottom: 8px; 104 | } 105 | 106 | footer { 107 | color: var(--header-color-text); 108 | background-color: var(--header-color-background); 109 | padding: 48px 0; 110 | } 111 | 112 | footer h2, 113 | footer p { 114 | max-width: 80%; 115 | margin: 0 auto; 116 | } 117 | 118 | footer h2 { 119 | font-size: 1rem; 120 | margin-bottom: 4px; 121 | } 122 | 123 | footer p { 124 | font-size: 0.75rem; 125 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/apri-una-segnalazione.it.yaml: -------------------------------------------------------------------------------- 1 | name: Apri una segnalazione - IT 2 | description: Per segnalare bug, aprire una discussione o inviare un contributo 3 | labels: [] 4 | body: 5 | - type: checkboxes 6 | attributes: 7 | label: Esiste già una discussione sul tema che ti interessa, o su un tema simile? 8 | description: | 9 | Verifica nella [lista delle discussioni](https://github.com/italia/design-tokens-italia/issues/). Se esiste, vai alla discussione esistente e partecipa lasciando un commento. 10 | options: 11 | - label: Ho verificato e non esiste 12 | required: true 13 | - type: markdown 14 | attributes: 15 | value: "-------" 16 | - type: textarea 17 | attributes: 18 | label: Cosa 19 | description: | 20 | Descrivi in modo chiaro e conciso il tema della tua segnalazione indicando il link della pagina o delle pagine interessate. 21 | 22 | Per segnalare un bug indica come riprodurlo per passi: es. (1) Vai a '...'; (2) Fai click su '...'; (3) Ora trovi il bug '...'. 23 | Per proporre un contributo descrivi la soluzione che immagini, cosa ti aspetti e le eventuali alternative hai già valutato. 24 | 25 | Puoi anche aggiungere catture di schermo per arricchire la segnalazione. 26 | Assicurati di non condividere informazioni personali. 27 | validations: 28 | required: true 29 | - type: textarea 30 | attributes: 31 | label: Perché 32 | description: | 33 | Spiega perché ritieni rilevante la segnalazione. 34 | 35 | Indica analisi, verifiche e test svolti a supporto (es. dati di analytics, analisi euristiche, test di usabilità, verifiche di accessibilità), se disponibili. 36 | validations: 37 | required: true 38 | - type: textarea 39 | attributes: 40 | label: Contesto 41 | description: | 42 | Se significative, inserisci informazioni su tipo di dispositivo, sistema operativo, browser. 43 | validations: 44 | required: false 45 | - type: textarea 46 | attributes: 47 | label: Altro 48 | description: | 49 | Inserisci link a esempi, ricerca, design o codice a corredo della segnalazione, se disponibili. 50 | validations: 51 | required: false 52 | - type: markdown 53 | attributes: 54 | value: | 55 | ------- 56 | 57 | [Conosci il modello di contribuzione del design system del Paese?](https://designers.italia.it/design-system/come-contribuire/modello-di-contribuzione/) 58 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/open-an-issue.en.yaml: -------------------------------------------------------------------------------- 1 | name: Open an issue - EN 2 | description: To report bugs, open a discussion, or submit a contribution 3 | labels: [] 4 | body: 5 | - type: checkboxes 6 | attributes: 7 | label: Does a discussion already exist on the topic you are interested in, or on a similar topic? 8 | description: | 9 | Please check [issue list](https://github.com/italia/design-tokens-italia/issues/). If it exists, participate by posting a comment on the already existing issue. 10 | options: 11 | - label: I verified and it doesn't exist 12 | required: true 13 | - type: markdown 14 | attributes: 15 | value: "-------" 16 | - type: textarea 17 | attributes: 18 | label: What 19 | description: | 20 | Please describe the theme of your issue in a clear and concise manner, and include the link to the page(s) of concern and screenshots. 21 | 22 | To report a bug, specify how to reproduce it step by step. E.g. (1) Go to '...'; (2) Click '...'; (3) Notice the bug '...'. 23 | To propose a novel contribution, describe the problem you want to solve and the solution you envision, what you expect, and any alternative solutions you've considered. 24 | 25 | Consider adding screen captures to enhance your report. 26 | Make sure you do not share any personal information in the process. 27 | validations: 28 | required: true 29 | - type: textarea 30 | attributes: 31 | label: Why 32 | description: | 33 | Explain why you consider this report relevant. 34 | 35 | Highlight any analysis, verifications and tests you've conducted to support your issue or contribution (e.g., data analytics, heuristic analysis, usability tests, accessibility checks), if available. 36 | validations: 37 | required: true 38 | - type: textarea 39 | attributes: 40 | label: Context 41 | description: | 42 | If relevant, please provide details on the device type, operating system and browser. 43 | validations: 44 | required: false 45 | - type: textarea 46 | attributes: 47 | label: More 48 | description: | 49 | If available, provide links to related examples, research, designs or code. 50 | validations: 51 | required: false 52 | - type: markdown 53 | attributes: 54 | value: | 55 | ------- 56 | 57 | [Do you know Italia's Design System contribution model?](https://designers.italia.it/design-system/come-contribuire/modello-di-contribuzione/) (Italian language) 58 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Design Tokens Italia 2 | 3 | [![Versione](https://img.shields.io/npm/v/design-tokens-italia.svg?logo=npm)](https://github.com/italia/design-tokens-italia/releases) 4 | [![Build](https://github.com/italia/design-tokens-italia/actions/workflows/build.yml/badge.svg)](https://github.com/italia/design-tokens-italia/actions) 5 | [![GitHub issues](https://img.shields.io/github/issues/italia/design-tokens-italia.svg)](https://github.com/italia/design-tokens-italia/issues) 6 | [![Join the #design channel](https://img.shields.io/badge/Slack%20channel-%23design-blue.svg)](https://developersitalia.slack.com/messages/C7VPAUVB3/) 7 | [![Get invited](https://slack.developers.italia.it/badge.svg)](https://slack.developers.italia.it/) 8 | 9 | I design tokens del [Design system .italia](https://designers.italia.it/design-system/) definiscono, documentano e consentono l'applicazione di decisioni progettuali su larga scala, garantendo la coerenza di progettazione e sviluppo delle interfacce digitali della Pubblica Amministrazione italiana. 10 | 11 | Rappresentano associazioni fra attributi, come colori, tipografia, spaziature e dimensioni e i loro valori. Per questo motivo sono considerati i fondamenti strutturali del design system. 12 | 13 | Per maggiori informazioni consulta la [documentazione ufficiale](https://designers.italia.it/design-system/fondamenti/design-tokens/) del design system. 14 | 15 | ## Installazione 16 | 17 | Si richiede `Node >= 22` 18 | 19 | ```sh 20 | npm install design-tokens-italia 21 | ``` 22 | 23 | ## Utilizzo 24 | 25 | ### CSS Custom Properties 26 | ```css 27 | @import 'design-tokens-italia/dist/css/variables.css'; 28 | 29 | .mio-elemento { 30 | color: var(--color-text-primary); 31 | padding: var(--spacing-md); 32 | } 33 | ``` 34 | 35 | ### Variabili Sass 36 | ```scss 37 | @import 'design-tokens-italia/dist/scss/variables'; 38 | 39 | .mio-elemento { 40 | color: $color-text-primary; 41 | padding: $spacing-md; 42 | } 43 | ``` 44 | 45 | ## Contenuto del package 46 | 47 | I design token sono classificati in tre livelli di profondità in base al contesto di applicazione: 48 | 49 | - **Token globali** (`tokens/global.json`) - fondamenti visivi strutturali, usati come riferimento per i livelli semantici e specifici 50 | - **Token semantici** (`tokens/semantic.json`) - decisioni progettuali riutilizzabili per più elementi e componenti 51 | - **Token specifici** (`tokens/specific.json`) - rappresentazione esaustiva di ogni valore associato a un elemento o componente 52 | 53 | I file CSS e SCSS nella cartella `dist/` sono generati automaticamente dai file JSON tramite [Style Dictionary](https://styledictionary.com/). 54 | 55 | ## Contribuire allo sviluppo 56 | 57 | ### Setup locale 58 | ```sh 59 | npm install 60 | ``` 61 | 62 | ### Workflow di aggiornamento 63 | 64 | 1. I design token vengono esportati da Figma utilizzando [Tokens Studio for Figma](https://docs.tokens.studio) in formato JSON 65 | 2. I file JSON vengono salvati nella cartella `tokens/` 66 | 3. Style Dictionary genera automaticamente le variabili CSS e SCSS: 67 | ```sh 68 | npm run build 69 | ``` 70 | 71 | Questo comando processa i file JSON e genera: 72 | - `dist/css/variables.css` - CSS Custom Properties 73 | - `dist/scss/_variables.scss` - Variabili Sass 74 | -------------------------------------------------------------------------------- /test-vars/css/styles-css-variables.css: -------------------------------------------------------------------------------- 1 | .square { 2 | width: 100%; 3 | height: 200px; 4 | display: flex; 5 | background-color: var(--global-primary-primary-100); 6 | align-items: center; 7 | justify-content: center; 8 | color: var(--global-primary-primary-white); 9 | } 10 | 11 | .color { 12 | width: 100%; 13 | height: 80px; 14 | display: flex; 15 | background-color: grey; 16 | align-items: center; 17 | justify-content: center; 18 | color: var(--global-primary-primary-white); 19 | } 20 | 21 | .radius-small { 22 | border-radius: var(--radius-small); 23 | } 24 | 25 | .radius-medium { 26 | border-radius: var(--radius-medium); 27 | } 28 | 29 | .radius-big { 30 | border-radius: var(--radius-big); 31 | } 32 | 33 | 34 | .global-primary-primary-05 { 35 | background-color: var(--global-primary-primary-05); 36 | color: var(--global-primary-primary-130); 37 | } 38 | 39 | .global-primary-primary-10 { 40 | background-color: var(--global-primary-primary-10); 41 | color: var(--global-primary-primary-130); 42 | } 43 | 44 | .global-primary-primary-20 { 45 | background-color: var(--global-primary-primary-20); 46 | } 47 | 48 | .global-primary-primary-30 { 49 | background-color: var(--global-primary-primary-30); 50 | } 51 | 52 | .global-primary-primary-60 { 53 | background-color: var(--global-primary-primary-60); 54 | } 55 | 56 | .global-primary-primary-100 { 57 | background-color: var(--global-primary-primary-100); 58 | } 59 | 60 | .global-primary-primary-105 { 61 | background-color: var(--global-primary-primary-105); 62 | } 63 | 64 | .global-primary-primary-110 { 65 | background-color: var(--global-primary-primary-110); 66 | } 67 | 68 | .global-primary-primary-115 { 69 | background-color: var(--global-primary-primary-115); 70 | } 71 | 72 | .global-primary-primary-120 { 73 | background-color: var(--global-primary-primary-120); 74 | } 75 | 76 | .global-primary-primary-125 { 77 | background-color: var(--global-primary-primary-125); 78 | } 79 | 80 | .global-primary-primary-130 { 81 | background-color: var(--global-primary-primary-130); 82 | } 83 | /*---------------*/ 84 | .global-primary-primary-accent { 85 | background-color: var(--global-primary-primary-accent); 86 | } 87 | 88 | .global-primary-primary-accent-mid1 { 89 | background-color: var(--global-primary-primary-accent-mid1); 90 | } 91 | 92 | .global-primary-primary-accent-mid2 { 93 | background-color: var(--global-primary-primary-accent-mid2); 94 | } 95 | 96 | .global-primary-primary-accent-mid3 { 97 | background-color: var(--global-primary-primary-accent-mid3); 98 | } 99 | 100 | .global-primary-primary-accent-mid4 { 101 | background-color: var(--global-primary-primary-accent-mid4); 102 | color: var(--global-primary-primary-accent); 103 | } 104 | 105 | .global-primary-primary-accent-mid5 { 106 | background-color: var(--global-primary-primary-accent-mid5); 107 | color: var(--global-primary-primary-accent); 108 | } 109 | /*---------------------------*/ 110 | .global-semantic-semantic-error { 111 | background-color: var(--global-semantic-semantic-error); 112 | } 113 | 114 | .global-semantic-semantic-warning { 115 | background-color: var(--global-semantic-semantic-warning); 116 | } 117 | 118 | .global-semantic-semantic-success { 119 | background-color: var(--global-semantic-semantic-success); 120 | } 121 | /*-------------------------------------*/ 122 | 123 | .global-secondary-secondary01 { 124 | background-color: var(--global-secondary-secondary01); 125 | color: var(--global-secondary-secondary10); 126 | } 127 | 128 | .global-secondary-secondary02 { 129 | background-color: var(--global-secondary-secondary02); 130 | color: var(--global-secondary-secondary10); 131 | } 132 | 133 | .global-secondary-secondary03 { 134 | background-color: var(--global-secondary-secondary03); 135 | } 136 | 137 | .global-secondary-secondary04 { 138 | background-color: var(--global-secondary-secondary04); 139 | } 140 | 141 | .global-secondary-secondary05 { 142 | background-color: var(--global-secondary-secondary05); 143 | } 144 | 145 | .global-secondary-secondary06 { 146 | background-color: var(--global-secondary-secondary06); 147 | } 148 | 149 | .global-secondary-secondary07 { 150 | background-color: var(--global-secondary-secondary07); 151 | } 152 | 153 | .global-secondary-secondary08 { 154 | background-color: var(--global-secondary-secondary08); 155 | } 156 | 157 | .global-secondary-secondary09 { 158 | background-color: var(--global-secondary-secondary09); 159 | } 160 | 161 | .global-secondary-secondary10 { 162 | background-color: var(--global-secondary-secondary10); 163 | } -------------------------------------------------------------------------------- /test-vars/css/styles.css: -------------------------------------------------------------------------------- 1 | .square { 2 | width: 100%; 3 | height: 200px; 4 | display: -webkit-box; 5 | display: -ms-flexbox; 6 | display: flex; 7 | background-color: #0066cc; 8 | -webkit-box-align: center; 9 | -ms-flex-align: center; 10 | align-items: center; 11 | -webkit-box-pack: center; 12 | -ms-flex-pack: center; 13 | justify-content: center; 14 | color: #ffffff; } 15 | 16 | .color { 17 | width: 100%; 18 | height: 80px; 19 | display: -webkit-box; 20 | display: -ms-flexbox; 21 | display: flex; 22 | background-color: grey; 23 | -webkit-box-align: center; 24 | -ms-flex-align: center; 25 | align-items: center; 26 | -webkit-box-pack: center; 27 | -ms-flex-pack: center; 28 | justify-content: center; 29 | color: #ffffff; } 30 | 31 | /*----------------*/ 32 | .spacing { 33 | background-color: #0066cc; 34 | display: inline-block; 35 | margin-right: 8px; } 36 | 37 | .spacing-small { 38 | height: 8px; 39 | width: 8px; } 40 | 41 | .spacing-medium { 42 | height: 16px; 43 | width: 16px; } 44 | 45 | .spacing-large { 46 | height: 24px; 47 | width: 24px; } 48 | 49 | .spacing-xlarge { 50 | height: 32px; 51 | width: 32px; } 52 | 53 | .spacing-x2large { 54 | height: 40px; 55 | width: 40px; } 56 | 57 | .spacing-x3large { 58 | height: 48px; 59 | width: 48px; } 60 | 61 | .spacing-x4large { 62 | height: 56px; 63 | width: 56px; } 64 | 65 | .spacing-x5large { 66 | height: 64px; 67 | width: 64px; } 68 | 69 | .spacing-x6large { 70 | height: 72px; 71 | width: 72px; } 72 | 73 | .spacing-x7large { 74 | height: 80px; 75 | width: 80px; } 76 | 77 | /*----------------*/ 78 | .radius-small { 79 | border-radius: 4px; } 80 | 81 | .radius-medium { 82 | border-radius: 8px; } 83 | 84 | .radius-big { 85 | border-radius: 16px; } 86 | 87 | /*----------------*/ 88 | .global-primary-primary-05 { 89 | background-color: #eaf2fb; 90 | color: #001a33; } 91 | 92 | .global-primary-primary-10 { 93 | background-color: #d4e6f7; 94 | color: #001a33; } 95 | 96 | .global-primary-primary-20 { 97 | background-color: #aaccee; } 98 | 99 | .global-primary-primary-30 { 100 | background-color: #80b3e5; } 101 | 102 | .global-primary-primary-60 { 103 | background-color: #599cde; } 104 | 105 | .global-primary-primary-100 { 106 | background-color: #0066cc; } 107 | 108 | .global-primary-primary-105 { 109 | background-color: #0059b3; } 110 | 111 | .global-primary-primary-110 { 112 | background-color: #004d99; } 113 | 114 | .global-primary-primary-115 { 115 | background-color: #004080; } 116 | 117 | .global-primary-primary-120 { 118 | background-color: #003366; } 119 | 120 | .global-primary-primary-125 { 121 | background-color: #00264d; } 122 | 123 | .global-primary-primary-130 { 124 | background-color: #001a33; } 125 | 126 | /*---------------*/ 127 | .global-primary-primary-accent { 128 | background-color: #0073e6; } 129 | 130 | .global-primary-primary-accent-mid1 { 131 | background-color: #1a8cff; } 132 | 133 | .global-primary-primary-accent-mid2 { 134 | background-color: #4da6ff; } 135 | 136 | .global-primary-primary-accent-mid3 { 137 | background-color: #80bfff; } 138 | 139 | .global-primary-primary-accent-mid4 { 140 | background-color: #b3d9ff; 141 | color: #0073e6; } 142 | 143 | .global-primary-primary-accent-mid5 { 144 | background-color: #e6f2ff; 145 | color: #0073e6; } 146 | 147 | /*---------------------------*/ 148 | .global-semantic-semantic-error { 149 | background-color: #D1344C; } 150 | 151 | .global-semantic-semantic-warning { 152 | background-color: #D97E00; } 153 | 154 | .global-semantic-semantic-success { 155 | background-color: #008255; } 156 | 157 | /*-------------------------------------*/ 158 | .global-secondary-secondary01 { 159 | background-color: #e8ebed; 160 | color: #17334f; } 161 | 162 | .global-secondary-secondary02 { 163 | background-color: #d1d6db; 164 | color: #17334f; } 165 | 166 | .global-secondary-secondary03 { 167 | background-color: #bac2ca; } 168 | 169 | .global-secondary-secondary04 { 170 | background-color: #a3adb8; } 171 | 172 | .global-secondary-secondary05 { 173 | background-color: #8c99a6; } 174 | 175 | .global-secondary-secondary06 { 176 | background-color: #758595; } 177 | 178 | .global-secondary-secondary07 { 179 | background-color: #5d7083; } 180 | 181 | .global-secondary-secondary08 { 182 | background-color: #465c72; } 183 | 184 | .global-secondary-secondary09 { 185 | background-color: #2d455c; } 186 | 187 | .global-secondary-secondary10 { 188 | background-color: #17334f; } 189 | -------------------------------------------------------------------------------- /test-vars/scss/styles.scss: -------------------------------------------------------------------------------- 1 | @import '../../build/scss/variables'; 2 | 3 | .square { 4 | width: 100%; 5 | height: 200px; 6 | display: flex; 7 | background-color: $global-primary-primary-100; 8 | align-items: center; 9 | justify-content: center; 10 | color: $global-primary-primary-white; 11 | } 12 | 13 | .color { 14 | width: 100%; 15 | height: 80px; 16 | display: flex; 17 | background-color: grey; 18 | align-items: center; 19 | justify-content: center; 20 | color: $global-primary-primary-white; 21 | } 22 | 23 | /*----------------*/ 24 | .spacing { 25 | background-color: $global-primary-primary-100; 26 | display: inline-block; 27 | margin-right: $spacing-small; 28 | } 29 | 30 | .spacing-small { 31 | height: $spacing-small; 32 | width: $spacing-small; 33 | } 34 | 35 | .spacing-medium { 36 | height: $spacing-medium; 37 | width: $spacing-medium; 38 | } 39 | 40 | .spacing-large { 41 | height: $spacing-large; 42 | width: $spacing-large; 43 | } 44 | 45 | .spacing-xlarge { 46 | height: $spacing-xlarge; 47 | width: $spacing-xlarge; 48 | } 49 | 50 | .spacing-x2large { 51 | height: $spacing-x2large; 52 | width: $spacing-x2large; 53 | } 54 | 55 | .spacing-x3large { 56 | height: $spacing-x3large; 57 | width: $spacing-x3large; 58 | } 59 | 60 | .spacing-x4large { 61 | height: $spacing-x4large; 62 | width: $spacing-x4large; 63 | } 64 | 65 | .spacing-x5large { 66 | height: $spacing-x5large; 67 | width: $spacing-x5large; 68 | } 69 | 70 | .spacing-x6large { 71 | height: $spacing-x6large; 72 | width: $spacing-x6large; 73 | } 74 | 75 | .spacing-x7large { 76 | height: $spacing-x7large; 77 | width: $spacing-x7large; 78 | } 79 | 80 | /*----------------*/ 81 | .radius-small { 82 | border-radius: $radius-small; 83 | } 84 | 85 | .radius-medium { 86 | border-radius: $radius-medium; 87 | } 88 | 89 | .radius-big { 90 | border-radius: $radius-big; 91 | } 92 | 93 | /*----------------*/ 94 | .global-primary-primary-05 { 95 | background-color: $global-primary-primary-05; 96 | color: $global-primary-primary-130; 97 | } 98 | 99 | .global-primary-primary-10 { 100 | background-color: $global-primary-primary-10; 101 | color: $global-primary-primary-130; 102 | } 103 | 104 | .global-primary-primary-20 { 105 | background-color: $global-primary-primary-20; 106 | } 107 | 108 | .global-primary-primary-30 { 109 | background-color: $global-primary-primary-30; 110 | } 111 | 112 | .global-primary-primary-60 { 113 | background-color: $global-primary-primary-60; 114 | } 115 | 116 | .global-primary-primary-100 { 117 | background-color: $global-primary-primary-100; 118 | } 119 | 120 | .global-primary-primary-105 { 121 | background-color: $global-primary-primary-105; 122 | } 123 | 124 | .global-primary-primary-110 { 125 | background-color: $global-primary-primary-110; 126 | } 127 | 128 | .global-primary-primary-115 { 129 | background-color: $global-primary-primary-115; 130 | } 131 | 132 | .global-primary-primary-120 { 133 | background-color: $global-primary-primary-120; 134 | } 135 | 136 | .global-primary-primary-125 { 137 | background-color: $global-primary-primary-125; 138 | } 139 | 140 | .global-primary-primary-130 { 141 | background-color: $global-primary-primary-130; 142 | } 143 | /*---------------*/ 144 | .global-primary-primary-accent { 145 | background-color: $global-primary-primary-accent; 146 | } 147 | 148 | .global-primary-primary-accent-mid1 { 149 | background-color: $global-primary-primary-accent-mid1; 150 | } 151 | 152 | .global-primary-primary-accent-mid2 { 153 | background-color: $global-primary-primary-accent-mid2; 154 | } 155 | 156 | .global-primary-primary-accent-mid3 { 157 | background-color: $global-primary-primary-accent-mid3; 158 | } 159 | 160 | .global-primary-primary-accent-mid4 { 161 | background-color: $global-primary-primary-accent-mid4; 162 | color: $global-primary-primary-accent; 163 | } 164 | 165 | .global-primary-primary-accent-mid5 { 166 | background-color: $global-primary-primary-accent-mid5; 167 | color: $global-primary-primary-accent; 168 | } 169 | /*---------------------------*/ 170 | .global-semantic-semantic-error { 171 | background-color: $global-semantic-semantic-error; 172 | } 173 | 174 | .global-semantic-semantic-warning { 175 | background-color: $global-semantic-semantic-warning; 176 | } 177 | 178 | .global-semantic-semantic-success { 179 | background-color: $global-semantic-semantic-success; 180 | } 181 | /*-------------------------------------*/ 182 | 183 | .global-secondary-secondary01 { 184 | background-color: $global-secondary-secondary01; 185 | color: $global-secondary-secondary10; 186 | } 187 | 188 | .global-secondary-secondary02 { 189 | background-color: $global-secondary-secondary02; 190 | color: $global-secondary-secondary10; 191 | } 192 | 193 | .global-secondary-secondary03 { 194 | background-color: $global-secondary-secondary03; 195 | } 196 | 197 | .global-secondary-secondary04 { 198 | background-color: $global-secondary-secondary04; 199 | } 200 | 201 | .global-secondary-secondary05 { 202 | background-color: $global-secondary-secondary05; 203 | } 204 | 205 | .global-secondary-secondary06 { 206 | background-color: $global-secondary-secondary06; 207 | } 208 | 209 | .global-secondary-secondary07 { 210 | background-color: $global-secondary-secondary07; 211 | } 212 | 213 | .global-secondary-secondary08 { 214 | background-color: $global-secondary-secondary08; 215 | } 216 | 217 | .global-secondary-secondary09 { 218 | background-color: $global-secondary-secondary09; 219 | } 220 | 221 | .global-secondary-secondary10 { 222 | background-color: $global-secondary-secondary10; 223 | } -------------------------------------------------------------------------------- /test-themes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Test variabili per temi 8 | 9 | 10 | 11 | 12 | 13 |
14 |
Nome sito
15 | 31 | 36 | 37 | 42 |
43 |
44 |
45 |

Titolo pagina

46 |

Sezione 1

47 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque viverra neque metus, quis efficitur sem efficitur vel. Suspendisse at tristique turpis, id luctus nulla. Ut in erat in nunc rhoncus rhoncus. Vestibulum eu placerat tortor. Duis non arcu non eros venenatis elementum. Morbi sit amet elit tincidunt, tempus lorem non, tincidunt ipsum. Proin ullamcorper auctor nisl, eu tristique arcu. Donec fermentum volutpat ultrices. Quisque in ipsum volutpat, pulvinar libero ut, maximus metus. Nam sagittis enim enim, sed hendrerit augue viverra a. Nulla interdum dolor at nulla sodales, eu faucibus orci elementum.

48 | 49 |

Donec hendrerit viverra porta. Nam vel lacus urna. Nullam eleifend ligula quam, eget gravida eros dapibus sed. Nulla aliquet pellentesque tortor aliquam dapibus. Morbi eleifend blandit pellentesque. Aliquam dictum feugiat nibh, id porttitor leo blandit ut. Curabitur nunc quam, efficitur id felis at, pulvinar interdum libero. Donec sit amet felis quis justo tincidunt placerat.

50 | 51 |

Nullam dignissim ligula ut dictum tristique. Quisque convallis tellus sed ex rhoncus, eu imperdiet quam vehicula. Morbi aliquet dignissim massa. Vivamus ornare magna ut diam mollis, ac pellentesque lacus tempor. Aliquam sit amet tempus nulla, id porttitor leo blandit ut. Ut quis tellus sed eros fringilla mollis. Duis eu dapibus leo, ut scelerisque mauris. Suspendisse eget nibh blandit felis imperdiet lacinia. Aliquam erat volutpat. Donec sed ante massa. Praesent ac dictum sem. Donec a feugiat est, vitae bibendum odio. Aenean enim quam, gravida eu erat eget, malesuada ultrices augue. Nulla rhoncus eleifend bibendum. Pellentesque quis est scelerisque nibh rutrum dictum sit amet in augue.

52 | 53 |

Sezione 2

54 |

Donec iaculis ipsum non ante efficitur adipiscing elit. Vivamus ultricies nibh ac ex sagittis, ac mattis tortor vestibulum. Nullam eu metus non nisi pharetra sollicitudin. Cras hendrerit mi urna. Praesent ut sem sed dui lacinia venenatis. Etiam quis cursus ipsum, in fermentum ex. Suspendisse condimentum vestibulum enim, id laoreet turpis elementum sit amet. Pellentesque mattis lectus non mauris vulputate maximus. Donec tempor, erat et faucibus efficitur, nisl diam fringilla dui, vel mattis est diam eu lacus. Cras ac nisl ac diam condimentum placerat. Pellentesque sodales libero sed risus dapibus auctor. Phasellus pulvinar justo ac consequat interdum. Aliquam a arcu tortor. Sed nec neque in dui congue facilisis.

55 |
56 | 81 |
82 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /test-vars/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Test import Design tokens da Figma 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 |

Test import Design tokens da Figma

22 |
23 |
24 |
25 |
26 |

Colori

27 |
28 |
29 |
30 |
31 |
32 |

Primary

33 |
34 | global-primary-primary-05 35 |
36 |
37 | global-primary-primary-10 38 |
39 |
40 | global-primary-primary-20 41 |
42 |
43 | global-primary-primary-30 44 |
45 |
46 | global-primary-primary-60 47 |
48 |
49 | global-primary-primary-100 50 |
51 |
52 | global-primary-primary-105 53 |
54 |
55 | global-primary-primary-110 56 |
57 |
58 | global-primary-primary-115 59 |
60 |
61 | global-primary-primary-120 62 |
63 |
64 | global-primary-primary-125 65 |
66 |
67 | global-primary-primary-130 68 |
69 |
70 |
71 |

Secondary

72 |
73 | global-secondary-secondary01 74 |
75 |
76 | global-secondary-secondary02 77 |
78 |
79 | global-secondary-secondary03 80 |
81 |
82 | global-secondary-secondary04 83 |
84 |
85 | global-secondary-secondary05 86 |
87 |
88 | global-secondary-secondary06 89 |
90 |
91 | global-secondary-secondary07 92 |
93 |
94 | global-secondary-secondary08 95 |
96 |
97 | global-secondary-secondary09 98 |
99 |
100 | global-secondary-secondary10 101 |
102 |
103 |
104 |

Primary accent

105 |
106 | global-primary-primary-accent 107 |
108 |
109 | global-primary-primary-accent-mid1 110 |
111 |
112 | global-primary-primary-accent-mid2 113 |
114 |
115 | global-primary-primary-accent-mid3 116 |
117 |
118 | global-primary-primary-accent-mid4 119 |
120 |
121 | global-primary-primary-accent-mid5 122 |
123 |

Semantic

124 |
125 | global-semantic-semantic-error 126 |
127 |
128 | global-semantic-semantic-warning 129 |
130 |
131 | global-semantic-semantic-success 132 |
133 |
134 |
135 |
136 |
137 |

Radius

138 |
139 |
140 |
141 |
142 |
143 |
144 | radius-small 145 |
146 |
147 |
148 |
149 | radius-medium 150 |
151 |
152 |
153 |
154 | radius-big 155 |
156 |
157 |
158 |
159 |
160 |

Spacing

161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 | 180 | -------------------------------------------------------------------------------- /tokens/specific.json: -------------------------------------------------------------------------------- 1 | { 2 | "icon": { 3 | "default": { 4 | "$value": "{color.text.base}", 5 | "$type": "color", 6 | "$description": "Colore icona di base" 7 | }, 8 | "primary": { 9 | "$value": "{color.background.primary}", 10 | "$type": "color", 11 | "$description": "Colore icona con link" 12 | }, 13 | "primary-hover": { 14 | "$value": "{color.background.primary-hover}", 15 | "$type": "color", 16 | "$description": "Colore icona con link status hover" 17 | }, 18 | "primary-active": { 19 | "$value": "{color.background.primary-active}", 20 | "$type": "color", 21 | "$description": "Colore icona con link status attivo" 22 | }, 23 | "secondary": { 24 | "$value": "{color.background.secondary}", 25 | "$type": "color", 26 | "$description": "Colore icona di supporto" 27 | }, 28 | "secondary-hover": { 29 | "$value": "{color.background.secondary-hover}", 30 | "$type": "color", 31 | "$description": "Colore icona di supporto - status hover" 32 | }, 33 | "secondary-active": { 34 | "$value": "{color.background.secondary-active}", 35 | "$type": "color", 36 | "$description": "Colore icona di supporto - status attivo" 37 | }, 38 | "success": { 39 | "$value": "{color.background.success}", 40 | "$type": "color", 41 | "$description": "Colore icona di supporto per azioni avvenute con successo" 42 | }, 43 | "success-hover": { 44 | "$value": "{color.background.success-hover}", 45 | "$type": "color", 46 | "$description": "Colore icona di supporto per azioni avvenute con successo - status hover" 47 | }, 48 | "success-active": { 49 | "$value": "{color.background.success-active}", 50 | "$type": "color", 51 | "$description": "Colore icona di supporto per azioni avvenute con successo - status attivo" 52 | }, 53 | "warning": { 54 | "$value": "{color.background.warning}", 55 | "$type": "color", 56 | "$description": "Colore icona di supporto per comunicazioni che richiedono attenzione" 57 | }, 58 | "warning-hover": { 59 | "$value": "{color.background.warning-hover}", 60 | "$type": "color", 61 | "$description": "Colore icona di supporto per comunicazioni che richiedono attenzione - status hover" 62 | }, 63 | "warning-active": { 64 | "$value": "{color.background.warning-active}", 65 | "$type": "color", 66 | "$description": "Colore icona di supporto per comunicazioni che richiedono attenzione - status attivo" 67 | }, 68 | "danger": { 69 | "$value": "{color.background.danger}", 70 | "$type": "color", 71 | "$description": "Colore icona di supporto per azioni non andate a buon fine - status hover" 72 | }, 73 | "danger-hover": { 74 | "$value": "{color.background.danger-hover}", 75 | "$type": "color", 76 | "$description": "Colore icona di supporto per azioni non andate a buon fine - status hover" 77 | }, 78 | "danger-active": { 79 | "$value": "{color.background.danger-active}", 80 | "$type": "color", 81 | "$description": "Colore icona di supporto per azioni non andate a buon fine - status hover" 82 | }, 83 | "inverse": { 84 | "$value": "{color.background.inverse}", 85 | "$type": "color", 86 | "$description": "Colore icona dsabilitata" 87 | }, 88 | "disabled": { 89 | "$value": "{color.text.disabled}", 90 | "$type": "color", 91 | "$description": "Colore icona disabilitata." 92 | }, 93 | "size": { 94 | "xs": { 95 | "$value": "16px", 96 | "$type": "sizing", 97 | "$description": "Dimensione icona molto piccola" 98 | }, 99 | "s": { 100 | "$value": "24px", 101 | "$type": "sizing", 102 | "$description": "Dimensione icona piccola" 103 | }, 104 | "m": { 105 | "$value": "32px", 106 | "$type": "sizing", 107 | "$description": "Dimensione icona media" 108 | }, 109 | "l": { 110 | "$value": "48px", 111 | "$type": "sizing", 112 | "$description": "Dimensione icona grande" 113 | }, 114 | "xl": { 115 | "$value": "64px", 116 | "$type": "sizing", 117 | "$description": "Dimensione icona molto grande" 118 | } 119 | } 120 | }, 121 | "code-font": { 122 | "$value": "{font.mono}", 123 | "$type": "fontFamilies", 124 | "$description": "La famiglia di font predefinita per i blocchi di codice." 125 | }, 126 | "data-font": { 127 | "$value": "{font.mono}", 128 | "$type": "fontFamilies", 129 | "$description": "La famiglia di font predefinita per il contenuto della visualizzazione dei dati." 130 | }, 131 | "heading-font-weight": { 132 | "$value": "{font-weight.bold}", 133 | "$type": "fontWeights", 134 | "$description": "Il peso di font predefinito per i titoli." 135 | }, 136 | "heading-font-weight-weak": { 137 | "$value": "{font-weight.semibold}", 138 | "$type": "fontWeights", 139 | "$description": "Il peso di font alternativo per i titoli secondari." 140 | }, 141 | "heading-leading": { 142 | "$value": "{font-leading.2}", 143 | "$type": "lineHeights", 144 | "$description": "Spazio tra le righe predefinito per i titoli." 145 | }, 146 | "body-leading": { 147 | "$value": "{font-leading.5}", 148 | "$type": "lineHeights", 149 | "$description": "Spazio tra le righe predefinito per il corpo del testo." 150 | }, 151 | "caption-leading": { 152 | "$value": "{font-leading.3}", 153 | "$type": "lineHeights", 154 | "$description": "Spazio tra le righe predefinito per le didascalie." 155 | }, 156 | "lead-leading": { 157 | "$value": "{font-leading.3}", 158 | "$type": "lineHeights", 159 | "$description": "Spazio tra le righe predefinito per il testo in primo piano." 160 | }, 161 | "heading-1-font-size": { 162 | "$value": "{font-size.9}", 163 | "$type": "fontSizes", 164 | "$description": "La dimensione di font predefinita per il titolo 1." 165 | }, 166 | "heading-1-font-size-l": { 167 | "$value": "{font-size.10}", 168 | "$type": "fontSizes", 169 | "$description": "La dimensione di font predefinita per il titolo 1 grande." 170 | }, 171 | "heading-2-font-size": { 172 | "$value": "{font-size.8}", 173 | "$type": "fontSizes", 174 | "$description": "La dimensione di font predefinita per il titolo 2." 175 | }, 176 | "heading-2-font-size-l": { 177 | "$value": "{font-size.9}", 178 | "$type": "fontSizes", 179 | "$description": "La dimensione di font predefinita per il titolo 2 grande." 180 | }, 181 | "heading-3-font-size-l": { 182 | "$value": "{font-size.8}", 183 | "$type": "fontSizes", 184 | "$description": "La dimensione di font predefinita per il titolo 3 grande." 185 | }, 186 | "heading-3-font-size": { 187 | "$value": "{font-size.7}", 188 | "$type": "fontSizes", 189 | "$description": "La dimensione di font predefinita per il titolo 3." 190 | }, 191 | "heading-4-font-size": { 192 | "$value": "{font-size.6}", 193 | "$type": "fontSizes", 194 | "$description": "La dimensione di font predefinita per il titolo 4." 195 | }, 196 | "heading-4-font-size-l": { 197 | "$value": "{font-size.7}", 198 | "$type": "fontSizes", 199 | "$description": "La dimensione di font predefinita per il titolo 4 grande." 200 | }, 201 | "heading-5-font-size": { 202 | "$value": "{font-size.5}", 203 | "$type": "fontSizes", 204 | "$description": "La dimensione di font predefinita per il titolo 5." 205 | }, 206 | "heading-5-font-size-l": { 207 | "$value": "{font-size.6}", 208 | "$type": "fontSizes", 209 | "$description": "La dimensione di font predefinita per il titolo 5 grande." 210 | }, 211 | "heading-6-font-size": { 212 | "$value": "{font-size.3}", 213 | "$type": "fontSizes", 214 | "$description": "La dimensione di font predefinita per il titolo 6." 215 | }, 216 | "heading-6-font-size-l": { 217 | "$value": "{font-size.4}", 218 | "$type": "fontSizes", 219 | "$description": "La dimensione di font predefinita per il titolo 6 grande." 220 | }, 221 | "body-font-size": { 222 | "$value": "{font-size.3}", 223 | "$type": "fontSizes", 224 | "$description": "La dimensione di font predefinita per il corpo del testo." 225 | }, 226 | "body-font-size-l": { 227 | "$value": "{font-size.4}", 228 | "$type": "fontSizes", 229 | "$description": "La dimensione di font predefinita per il corpo del testo grande." 230 | }, 231 | "caption-font-size": { 232 | "$value": "{font-size.2}", 233 | "$type": "fontSizes", 234 | "$description": "La dimensione di font predefinita per le didascalie." 235 | }, 236 | "lead-font-size": { 237 | "$value": "{font-size.5}", 238 | "$type": "fontSizes", 239 | "$description": "La dimensione di font predefinita per il testo in primo piano." 240 | }, 241 | "lead-font-size-l": { 242 | "$value": "{font-size.6}", 243 | "$type": "fontSizes", 244 | "$description": "La dimensione di font predefinita per il testo in primo piano grande." 245 | }, 246 | "label-font-size-xs": { 247 | "$value": "{font-size.1}", 248 | "$type": "fontSizes", 249 | "$description": "La dimensione di font predefinita per le etichette molto piccole." 250 | }, 251 | "label-font-size-s": { 252 | "$value": "{font-size.2}", 253 | "$type": "fontSizes", 254 | "$description": "La dimensione di font predefinita per le etichette piccole." 255 | }, 256 | "label-font-size": { 257 | "$value": "{font-size.3}", 258 | "$type": "fontSizes", 259 | "$description": "La dimensione di font predefinita per le etichette medie." 260 | }, 261 | "label-font-size-l": { 262 | "$value": "{font-size.4}", 263 | "$type": "fontSizes", 264 | "$description": "La dimensione di font predefinita per le etichette grandi." 265 | }, 266 | "label-leading": { 267 | "$value": "{font-leading.1}", 268 | "$type": "lineHeights", 269 | "$description": "Spazio tra le righe predefinito per le etichette." 270 | }, 271 | "body-font-weight": { 272 | "$value": "{font-weight.regular}", 273 | "$type": "fontWeights" 274 | }, 275 | "caption-font-weight-regular": { 276 | "$value": "{font-weight.regular}", 277 | "$type": "fontWeights" 278 | }, 279 | "caption-font-weight-semibold": { 280 | "$value": "{font-weight.semibold}", 281 | "$type": "fontWeights" 282 | }, 283 | "lead-font-weight": { 284 | "$value": "{font-weight.regular}", 285 | "$type": "fontWeights" 286 | } 287 | } -------------------------------------------------------------------------------- /tokens/semantic.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "background": { 4 | "primary": { 5 | "$value": "{color.blue.40}", 6 | "$type": "color", 7 | "$description": "Sfondo primario, utilizzato per elementi interattivi (buttons, links) ed elementi caratterizzati con l’identità visiva." 8 | }, 9 | "primary-light": { 10 | "$value": "{color.blue.87}", 11 | "$type": "color", 12 | "$description": "Sfondo con contrasto leggero, utilizzato come alternativa al colore primario per elementi interattivi." 13 | }, 14 | "primary-lighter": { 15 | "$value": "{color.blue.97}", 16 | "$type": "color", 17 | "$description": "Sfondo di colore primario con contrasto ridotto, definisce una sezione o una parte di essa nel contesto della pagina." 18 | }, 19 | "primary-hover": { 20 | "$value": "{color.blue.30}", 21 | "$type": "color", 22 | "$description": "Sfondo utilizzato su componenti primari interattivi nello stato di :hover." 23 | }, 24 | "primary-active": { 25 | "$value": "{color.blue.20}", 26 | "$type": "color", 27 | "$description": "Sfondo utilizzato su componenti primari interattivi nello stato attivo e premuto." 28 | }, 29 | "primary-muted": { 30 | "$value": "{color.blue.30}", 31 | "$type": "color", 32 | "$description": "Sfondo utilizzato su sezioni di pagina." 33 | }, 34 | "primary-deep": { 35 | "$value": "{color.blue.20}", 36 | "$type": "color", 37 | "$description": "Sfondo utilizzato su sezioni di pagina." 38 | }, 39 | "secondary": { 40 | "$value": "{color.slate.44}", 41 | "$type": "color", 42 | "$description": "Sfondo alternativo, utilizzato per elementi interattivi secondari o per sezioni di una pagina." 43 | }, 44 | "secondary-hover": { 45 | "$value": "{color.slate.28}", 46 | "$type": "color", 47 | "$description": "Sfondo utilizzato su elementi interattivi secondari nello stato di :hover." 48 | }, 49 | "secondary-active": { 50 | "$value": "{color.slate.20}", 51 | "$type": "color", 52 | "$description": "Sfondo utilizzato su elementi interattivi secondari nello stato attivo e premuto." 53 | }, 54 | "secondary-light": { 55 | "$value": "{color.slate.68}", 56 | "$type": "color", 57 | "$description": "Sfondo colore secondario chiaro." 58 | }, 59 | "secondary-lighter": { 60 | "$value": "{color.slate.85}", 61 | "$type": "color", 62 | "$description": "Sfondo colore secondario molto chiaro." 63 | }, 64 | "accent": { 65 | "$value": "{color.teal.32}", 66 | "$type": "color", 67 | "$description": "Sfondo con colore di accento per elementi interattivi." 68 | }, 69 | "accent-hover": { 70 | "$value": "{color.teal.26}", 71 | "$type": "color", 72 | "$description": "Sfondo utilizzato su elementi interattivi di accento nello stato di :hover." 73 | }, 74 | "muted": { 75 | "$value": "{color.gray.96}", 76 | "$type": "color", 77 | "$description": "Sfondo con contrasto molto leggero, definisce sezioni di una pagina o paragrafi di testo." 78 | }, 79 | "inverse": { 80 | "$value": "{color.white}", 81 | "$type": "color", 82 | "$description": "Sfondo invertito, utilizzato in combinazione con uno sfondo pagina/sezione di tipo primary, secondary o con colori neutri." 83 | }, 84 | "disabled": { 85 | "$value": "{color.slate.85}", 86 | "$type": "color", 87 | "$description": "Sfondo per elementi interattivi disabilitati/disattivati" 88 | }, 89 | "subtle": { 90 | "$value": "{color.gray.83}", 91 | "$type": "color", 92 | "$description": "Sfondo chiaro, utilizzato per definire sezioni di una pagina" 93 | }, 94 | "emphasis": { 95 | "$value": "{color.slate.20}", 96 | "$type": "color", 97 | "$description": "Sfondo di enfasi, utilizzato per mettere in risalto precise sezioni di una pagina" 98 | }, 99 | "success": { 100 | "$value": "{color.emerald.25}", 101 | "$type": "color", 102 | "$description": "Sfondo per uno stato di successo, utilizzato per elementi interattivi o sfondo di componenti. Il testo deve essere inverse" 103 | }, 104 | "success-light": { 105 | "$value": "{color.emerald.87}", 106 | "$type": "color", 107 | "$description": "Sfondo di successo per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse" 108 | }, 109 | "success-hover": { 110 | "$value": "{color.emerald.20}", 111 | "$type": "color", 112 | "$description": "Sfondo di successo, utilizzato per elementi interattivi nello stato di :hover" 113 | }, 114 | "success-active": { 115 | "$value": "{color.emerald.15}", 116 | "$type": "color", 117 | "$description": "Sfondo di successo, utilizzato per elementi interattivi nello stato attivo e premuto." 118 | }, 119 | "warning": { 120 | "$value": "{color.orange.30}", 121 | "$type": "color", 122 | "$description": "Sfondo di allerta, utilizzato per elementi interattivi o componenti. Il testo deve essere inverse" 123 | }, 124 | "warning-light": { 125 | "$value": "{color.orange.87}", 126 | "$type": "color", 127 | "$description": "Sfondo di allerta per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse" 128 | }, 129 | "warning-hover": { 130 | "$value": "{color.orange.25}", 131 | "$type": "color", 132 | "$description": "Sfondo di allerta, utilizzato per elementi interattivi nello stato di :hover" 133 | }, 134 | "warning-active": { 135 | "$value": "{color.orange.20}", 136 | "$type": "color", 137 | "$description": "Sfondo di allerta, utilizzato per elementi interattivi nello stato attivo e premuto." 138 | }, 139 | "danger": { 140 | "$value": "{color.red.50}", 141 | "$type": "color", 142 | "$description": "Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi o componenti. Il testo deve essere inverse." 143 | }, 144 | "danger-light": { 145 | "$value": "{color.red.96}", 146 | "$type": "color", 147 | "$description": "Sfondo di pericolo o errore per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse" 148 | }, 149 | "danger-hover": { 150 | "$value": "{color.red.37}", 151 | "$type": "color", 152 | "$description": "Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi nello stato di :hover." 153 | }, 154 | "danger-active": { 155 | "$value": "{color.red.25}", 156 | "$type": "color", 157 | "$description": "Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi nello stato attivo e premuto." 158 | } 159 | }, 160 | "border": { 161 | "primary": { 162 | "$value": "{color.blue.40}", 163 | "$type": "color", 164 | "$description": "Bordo primario, utilizzato per elementi interattivi cliccabili." 165 | }, 166 | "primary-hover": { 167 | "$value": "{color.blue.30}", 168 | "$type": "color", 169 | "$description": "Bordo primario per stato interattivo hover" 170 | }, 171 | "primary-active": { 172 | "$value": "{color.blue.20}", 173 | "$type": "color", 174 | "$description": "Bordo primario per stato interattivo attivo e premuto." 175 | }, 176 | "secondary": { 177 | "$value": "{color.slate.44}", 178 | "$type": "color", 179 | "$description": "Bordo secondario, utilizzato per elementi interattivi cliccabili" 180 | }, 181 | "secondary-hover": { 182 | "$value": "{color.slate.28}", 183 | "$type": "color", 184 | "$description": "Bordo secondario per stato interattivo hover" 185 | }, 186 | "secondary-active": { 187 | "$value": "{color.slate.20}", 188 | "$type": "color", 189 | "$description": "Bordo secondario per stato interattivo attivo e premuto." 190 | }, 191 | "inverse": { 192 | "$value": "{color.white}", 193 | "$type": "color", 194 | "$description": "Bordo invertito, utilizzato su sfondo a contrasto di tipo primary, secondary o emphasis" 195 | }, 196 | "disabled": { 197 | "$value": "{color.slate.85}", 198 | "$type": "color", 199 | "$description": "Bordo per elementi interattivi disabilitati" 200 | }, 201 | "subtle": { 202 | "$value": "{color.slate.78}", 203 | "$type": "color", 204 | "$description": "Bordo separatore, delimita le sezioni di una pagina, componenti o singoli elementi" 205 | }, 206 | "success": { 207 | "$value": "{color.emerald.25}", 208 | "$type": "color", 209 | "$description": "Bordo di successo, utilizzato per elementi interattivi o statici (alert, notifications, etc)" 210 | }, 211 | "success-hover": { 212 | "$value": "{color.emerald.20}", 213 | "$type": "color", 214 | "$description": "Bordo di successo per stato interattivo hover" 215 | }, 216 | "success-active": { 217 | "$value": "{color.emerald.15}", 218 | "$type": "color", 219 | "$description": "Bordo di successo per stato interattivo attivo e premuto." 220 | }, 221 | "warning": { 222 | "$value": "{color.orange.30}", 223 | "$type": "color", 224 | "$description": "Bordo di allerta, utilizzato per elementi interattivi o statici (vedi esempio success)" 225 | }, 226 | "warning-hover": { 227 | "$value": "{color.orange.25}", 228 | "$type": "color", 229 | "$description": "Bordo di allerta per stato interattivo hover" 230 | }, 231 | "warning-active": { 232 | "$value": "{color.orange.20}", 233 | "$type": "color", 234 | "$description": "Bordo di allerta per stato interattivo attivo e premuto." 235 | }, 236 | "danger": { 237 | "$value": "{color.red.50}", 238 | "$type": "color", 239 | "$description": "Colore di un bordo che avvisa di un pericolo o errore, utilizzato per elementi interattivi o statici (vedi esempio success)" 240 | }, 241 | "danger-hover": { 242 | "$value": "{color.red.37}", 243 | "$type": "color", 244 | "$description": "Colore di sfondo che avvisa di un pericolo o errore per stato interattivo :hover." 245 | }, 246 | "danger-active": { 247 | "$value": "{color.red.25}", 248 | "$type": "color", 249 | "$description": "Colore di sfondo che avvisa di un pericolo o errore per stato attivo e premuto." 250 | } 251 | }, 252 | "text": { 253 | "base": { 254 | "$value": "{color.gray.10}", 255 | "$type": "color", 256 | "$description": "Corpo pagina base" 257 | }, 258 | "primary": { 259 | "$value": "{color.blue.40}", 260 | "$type": "color", 261 | "$description": "Testo con link" 262 | }, 263 | "secondary": { 264 | "$value": "{color.slate.28}", 265 | "$type": "color", 266 | "$description": "Corpo pagina alternativo, contenuti di dettaglio, testo button secondary" 267 | }, 268 | "muted": { 269 | "$value": "{color.slate.44}", 270 | "$type": "color", 271 | "$description": "Testo di supporto per contenuti molto brevi" 272 | }, 273 | "disabled": { 274 | "$value": "{color.slate.44}", 275 | "$type": "color", 276 | "$description": "Testo disabilitato" 277 | }, 278 | "success": { 279 | "$value": "{color.emerald.25}", 280 | "$type": "color", 281 | "$description": "Testo di successo, può essere anche interattivo (button, link)" 282 | }, 283 | "success-hover": { 284 | "$value": "{color.emerald.20}", 285 | "$type": "color", 286 | "$description": "Testo di successo interattivo nello stato hover" 287 | }, 288 | "success-active": { 289 | "$value": "{color.emerald.15}", 290 | "$type": "color", 291 | "$description": "Testo di successo interattivo nello stato attivo e premuto." 292 | }, 293 | "warning": { 294 | "$value": "{color.orange.30}", 295 | "$type": "color", 296 | "$description": "Testo di allerta, può essere anche interattivo (button, link)" 297 | }, 298 | "warning-hover": { 299 | "$value": "{color.orange.25}", 300 | "$type": "color", 301 | "$description": "Testo di allerta interattivo nello stato hover" 302 | }, 303 | "warning-active": { 304 | "$value": "{color.orange.20}", 305 | "$type": "color", 306 | "$description": "Testo di allerta interattivo nello stato attivo e premuto." 307 | }, 308 | "danger": { 309 | "$value": "{color.red.50}", 310 | "$type": "color", 311 | "$description": "Colore del testo per problema o errore, può essere anche interattivo (link, button)" 312 | }, 313 | "danger-hover": { 314 | "$value": "{color.red.37}", 315 | "$type": "color", 316 | "$description": "Colore del testo per problema o errore interattivo nello stato hover" 317 | }, 318 | "danger-active": { 319 | "$value": "{color.red.25}", 320 | "$type": "color", 321 | "$description": "Colore del testo per problema o errore interattivo nello stato attivo e premuto." 322 | }, 323 | "inverse": { 324 | "$value": "{color.white}", 325 | "$type": "color", 326 | "$description": "Testo invertito per sfondi a contrasto (primary, secondary, emphasis)" 327 | }, 328 | "accent": { 329 | "$value": "{color.teal.32}", 330 | "$type": "color", 331 | "$description": "Testo di accento, alternativo al primary per elementi interattivi su sfondi a contrasto" 332 | } 333 | }, 334 | "link": { 335 | "base": { 336 | "$value": "{color.blue.40}", 337 | "$type": "color", 338 | "$description": "Colore base per i link" 339 | }, 340 | "hover": { 341 | "$value": "{color.blue.30}", 342 | "$type": "color", 343 | "$description": "Colore per i link nello stato hover" 344 | }, 345 | "active": { 346 | "$value": "{color.blue.20}", 347 | "$type": "color", 348 | "$description": "Colore per i link nello stato active" 349 | }, 350 | "secondary": { 351 | "$value": "{color.slate.28}", 352 | "$type": "color", 353 | "$description": "Colore del link secondario, richiede sempre la sottolineatura." 354 | }, 355 | "secondary-hover": { 356 | "$value": "{color.slate.20}", 357 | "$type": "color", 358 | "$description": "Testo del button secondary nello stato hover" 359 | }, 360 | "secondary-active": { 361 | "$value": "{color.slate.20}", 362 | "$type": "color", 363 | "$description": "Testo del button secondary nello stato attivo e premuto." 364 | }, 365 | "inverse": { 366 | "$value": "{color.white}", 367 | "$type": "color", 368 | "$description": "Colore per i link invertiti" 369 | }, 370 | "disabled": { 371 | "$value": "{color.slate.85}", 372 | "$type": "color", 373 | "$description": "Colore per i link disabilitati" 374 | }, 375 | "accent": { 376 | "$value": "{color.teal.32}", 377 | "$type": "color", 378 | "$description": "Colore di risalto per un link" 379 | }, 380 | "accent-hover": { 381 | "$value": "{color.teal.26}", 382 | "$type": "color", 383 | "$description": "Colore di risalto per un link in stato hover." 384 | } 385 | }, 386 | "outline": { 387 | "focus": { 388 | "$value": "{color.gray.10}", 389 | "$type": "color", 390 | "$description": "Colore di evidenziazione dello stato focus" 391 | } 392 | }, 393 | "shadow": { 394 | "whisper": { 395 | "$value": "{color.black.05}", 396 | "$type": "color", 397 | "$description": "Colore ombreggiatura leggermente visibile" 398 | }, 399 | "soft": { 400 | "$value": "{color.black.10}", 401 | "$type": "color", 402 | "$description": "Colore ombreggiatura chiara" 403 | }, 404 | "dark": { 405 | "$value": "{color.black.15}", 406 | "$type": "color", 407 | "$description": "Colore ombreggiatura molto visibile" 408 | } 409 | } 410 | }, 411 | "theme": { 412 | "italia": { 413 | "base": { 414 | "$value": "{color.blue.40}", 415 | "$type": "color", 416 | "$description": "Colore base del tema" 417 | }, 418 | "light": { 419 | "$value": "{color.blue.87}", 420 | "$type": "color", 421 | "$description": "Colore del tema chiaro" 422 | }, 423 | "lighter": { 424 | "$value": "{color.blue.97}", 425 | "$type": "color", 426 | "$description": "Colore del tema molto chiaro" 427 | }, 428 | "subtle": { 429 | "$value": "{color.blue.30}", 430 | "$type": "color", 431 | "$description": "Colore del tema meno saturo" 432 | }, 433 | "muted": { 434 | "$value": "{color.blue.25}", 435 | "$type": "color", 436 | "$description": "Colore del tema molto meno saturo" 437 | }, 438 | "deep": { 439 | "$value": "{color.blue.20}", 440 | "$type": "color", 441 | "$description": "Colore del tema scuro" 442 | } 443 | } 444 | }, 445 | "spacing": { 446 | "3xs": { 447 | "$value": "{spacing.1x}", 448 | "$type": "spacing", 449 | "$description": "Valore 3-extra-small nella scala dimensionale per la spaziatura" 450 | }, 451 | "xxs": { 452 | "$value": "{spacing.2x}", 453 | "$type": "spacing", 454 | "$description": "Valore extra-extra small nella scala dimensionale per la spaziatura" 455 | }, 456 | "xs": { 457 | "$value": "{spacing.3x}", 458 | "$type": "spacing", 459 | "$description": "Valore extra small nella scala dimensionale per la spaziatura" 460 | }, 461 | "s": { 462 | "$value": "{spacing.4x}", 463 | "$type": "spacing", 464 | "$description": "Valore small nella scala dimensionale per la spaziatura" 465 | }, 466 | "m": { 467 | "$value": "{spacing.6x}", 468 | "$type": "spacing", 469 | "$description": "Valore medium nella scala dimensionale per la spaziatura" 470 | }, 471 | "l": { 472 | "$value": "{spacing.8x}", 473 | "$type": "spacing", 474 | "$description": "Valore large nella scala dimensionale per la spaziatura" 475 | }, 476 | "xl": { 477 | "$value": "{spacing.10x}", 478 | "$type": "spacing", 479 | "$description": "Valore extra-large nella scala dimensionale per la spaziatura" 480 | }, 481 | "xxl": { 482 | "$value": "{spacing.12x}", 483 | "$type": "spacing", 484 | "$description": "Valore extra-extra-large nella scala dimensionale per la spaziatura" 485 | }, 486 | "3xl": { 487 | "$value": "{spacing.24x}", 488 | "$type": "spacing", 489 | "$description": "Valore 3-extra-large nella scala dimensionale per la spaziatura" 490 | } 491 | }, 492 | "elevation": { 493 | "low": { 494 | "$value": { 495 | "x": "0", 496 | "y": "{shadow.offset.s}", 497 | "blur": "{shadow.blur.s}", 498 | "spread": "0", 499 | "color": "{color.shadow.whisper}", 500 | "type": "dropShadow" 501 | }, 502 | "$type": "boxShadow" 503 | }, 504 | "medium": { 505 | "$value": { 506 | "x": "0", 507 | "y": "{shadow.offset.m}", 508 | "blur": "{shadow.blur.m}", 509 | "spread": "0", 510 | "color": "{color.shadow.soft}", 511 | "type": "dropShadow" 512 | }, 513 | "$type": "boxShadow" 514 | }, 515 | "high": { 516 | "$value": { 517 | "x": "0", 518 | "y": "{shadow.offset.l}", 519 | "blur": "{shadow.blur.l}", 520 | "spread": "0", 521 | "color": "{color.shadow.dark}", 522 | "type": "dropShadow" 523 | }, 524 | "$type": "boxShadow" 525 | } 526 | } 527 | } -------------------------------------------------------------------------------- /tokens/global.json: -------------------------------------------------------------------------------- 1 | { 2 | "border": { 3 | "base": { 4 | "$value": "1px", 5 | "$type": "borderWidth", 6 | "$description": "Dimensione base di un bordo." 7 | }, 8 | "double": { 9 | "$value": "2px", 10 | "$type": "borderWidth", 11 | "$description": "Dimensione doppia di un bordo." 12 | }, 13 | "thick": { 14 | "$value": "4px", 15 | "$type": "borderWidth", 16 | "$description": "Dimensione spessa di un bordo." 17 | }, 18 | "broad": { 19 | "$value": "8px", 20 | "$type": "borderWidth", 21 | "$description": "Dimensione larga di un bordo." 22 | } 23 | }, 24 | "color": { 25 | "black": { 26 | "10": { 27 | "$value": "rgba(0,0,0,0.10)", 28 | "$type": "color", 29 | "$description": "Colore neutro" 30 | }, 31 | "15": { 32 | "$value": "rgba(0,0,0,0.15)", 33 | "$type": "color", 34 | "$description": "Colore neutro" 35 | }, 36 | "25": { 37 | "$value": "rgba(0,0,0,0.25)", 38 | "$type": "color", 39 | "$description": "Colore neutro" 40 | }, 41 | "50": { 42 | "$value": "rgba(0,0,0,0.50)", 43 | "$type": "color", 44 | "$description": "Colore neutro" 45 | }, 46 | "85": { 47 | "$value": "rgba(0,0,0,0.85)", 48 | "$type": "color", 49 | "$description": "Colore neutro" 50 | }, 51 | "100": { 52 | "$value": "rgba(0,0,0,1)", 53 | "$type": "color", 54 | "$description": "Colore neutro" 55 | }, 56 | "05": { 57 | "$value": "rgba(0,0,0,0.05)", 58 | "$type": "color", 59 | "$description": "Colore neutro" 60 | } 61 | }, 62 | "white": { 63 | "$value": "#ffffff", 64 | "$type": "color", 65 | "$description": "Colore neutro" 66 | }, 67 | "blue": { 68 | "20": { 69 | "$value": "#003366", 70 | "$type": "color", 71 | "$description": "Colore tema default" 72 | }, 73 | "25": { 74 | "$value": "#004080", 75 | "$type": "color", 76 | "$description": "Colore tema default" 77 | }, 78 | "30": { 79 | "$value": "#004d99", 80 | "$type": "color", 81 | "$description": "Colore tema default" 82 | }, 83 | "40": { 84 | "$value": "#0066cc", 85 | "$type": "color", 86 | "$description": "Colore tema default - valore base" 87 | }, 88 | "48": { 89 | "$value": "#207ad5", 90 | "$type": "color", 91 | "$description": "Colore tema default" 92 | }, 93 | "57": { 94 | "$value": "#4392e0", 95 | "$type": "color", 96 | "$description": "Colore tema default" 97 | }, 98 | "67": { 99 | "$value": "#6aaaeb", 100 | "$type": "color", 101 | "$description": "Colore tema default" 102 | }, 103 | "77": { 104 | "$value": "#94c4f5", 105 | "$type": "color", 106 | "$description": "Colore tema default" 107 | }, 108 | "87": { 109 | "$value": "#bfdfff", 110 | "$type": "color", 111 | "$description": "Colore tema default" 112 | }, 113 | "97": { 114 | "$value": "#f2f7fc", 115 | "$type": "color", 116 | "$description": "Colore tema default" 117 | } 118 | }, 119 | "seagreen": { 120 | "10": { 121 | "$value": "#003121", 122 | "$type": "color", 123 | "$description": "Colore tema secondario" 124 | }, 125 | "14": { 126 | "$value": "#004931", 127 | "$type": "color", 128 | "$description": "Colore tema secondario" 129 | }, 130 | "19": { 131 | "$value": "#006242", 132 | "$type": "color", 133 | "$description": "Colore tema secondario" 134 | }, 135 | "24": { 136 | "$value": "#007A52", 137 | "$type": "color", 138 | "$description": "Colore tema secondario - valore base" 139 | }, 140 | "39": { 141 | "$value": "#329574", 142 | "$type": "color", 143 | "$description": "Colore tema secondario" 144 | }, 145 | "54": { 146 | "$value": "#64AF96", 147 | "$type": "color", 148 | "$description": "Colore tema secondario" 149 | }, 150 | "69": { 151 | "$value": "#96CAB9", 152 | "$type": "color", 153 | "$description": "Colore tema secondario" 154 | }, 155 | "76": { 156 | "$value": "#AFD7CA", 157 | "$type": "color", 158 | "$description": "Colore tema secondario" 159 | }, 160 | "84": { 161 | "$value": "#C8E4DB", 162 | "$type": "color", 163 | "$description": "Colore tema secondario" 164 | }, 165 | "92": { 166 | "$value": "#E1F2EC", 167 | "$type": "color", 168 | "$description": "Colore tema secondario" 169 | } 170 | }, 171 | "slate": { 172 | "20": { 173 | "$value": "#17324d", 174 | "$type": "color", 175 | "$description": "Colore neutro" 176 | }, 177 | "28": { 178 | "$value": "#2f475e", 179 | "$type": "color", 180 | "$description": "Colore neutro" 181 | }, 182 | "36": { 183 | "$value": "#455b71", 184 | "$type": "color", 185 | "$description": "Colore neutro" 186 | }, 187 | "44": { 188 | "$value": "#5c6f82", 189 | "$type": "color", 190 | "$description": "Colore neutro - valore base" 191 | }, 192 | "52": { 193 | "$value": "#768594", 194 | "$type": "color", 195 | "$description": "Colore neutro" 196 | }, 197 | "62": { 198 | "$value": "#929da9", 199 | "$type": "color", 200 | "$description": "Colore neutro" 201 | }, 202 | "68": { 203 | "$value": "#a3adb7", 204 | "$type": "color", 205 | "$description": "Colore neutro" 206 | }, 207 | "78": { 208 | "$value": "#c5c7c9", 209 | "$type": "color", 210 | "$description": "Colore neutro" 211 | }, 212 | "85": { 213 | "$value": "#d9dadb", 214 | "$type": "color", 215 | "$description": "Colore neutro" 216 | }, 217 | "93": { 218 | "$value": "#ebeced", 219 | "$type": "color", 220 | "$description": "Colore neutro" 221 | } 222 | }, 223 | "gray": { 224 | "10": { 225 | "$value": "#1a1a1a", 226 | "$type": "color", 227 | "$description": "Colore neutro" 228 | }, 229 | "15": { 230 | "$value": "#262626", 231 | "$type": "color", 232 | "$description": "Colore neutro - valore base" 233 | }, 234 | "25": { 235 | "$value": "#404040", 236 | "$type": "color", 237 | "$description": "Colore neutro" 238 | }, 239 | "32": { 240 | "$value": "#525252", 241 | "$type": "color", 242 | "$description": "Colore neutro" 243 | }, 244 | "45": { 245 | "$value": "#737373", 246 | "$type": "color", 247 | "$description": "Colore neutro" 248 | }, 249 | "64": { 250 | "$value": "#a3a3a3", 251 | "$type": "color", 252 | "$description": "Colore neutro" 253 | }, 254 | "83": { 255 | "$value": "#d4d4d4", 256 | "$type": "color", 257 | "$description": "Colore neutro" 258 | }, 259 | "90": { 260 | "$value": "#e5e5e5", 261 | "$type": "color", 262 | "$description": "Colore neutro" 263 | }, 264 | "96": { 265 | "$value": "#f5f5f5", 266 | "$type": "color", 267 | "$description": "Colore neutro" 268 | }, 269 | "98": { 270 | "$value": "#fafafa", 271 | "$type": "color", 272 | "$description": "Colore neutro" 273 | } 274 | }, 275 | "red": { 276 | "25": { 277 | "$value": "#661a26", 278 | "$type": "color", 279 | "$description": "Colore di sistema" 280 | }, 281 | "30": { 282 | "$value": "#7a1f2e", 283 | "$type": "color", 284 | "$description": "Colore di sistema" 285 | }, 286 | "37": { 287 | "$value": "#992639", 288 | "$type": "color", 289 | "$description": "Colore di sistema" 290 | }, 291 | "44": { 292 | "$value": "#b32d43", 293 | "$type": "color", 294 | "$description": "Colore di sistema" 295 | }, 296 | "50": { 297 | "$value": "#cc334d", 298 | "$type": "color", 299 | "$description": "Colore di sistema - valore base" 300 | }, 301 | "60": { 302 | "$value": "#d65c70", 303 | "$type": "color", 304 | "$description": "Colore di sistema" 305 | }, 306 | "70": { 307 | "$value": "#e08593", 308 | "$type": "color", 309 | "$description": "Colore di sistema" 310 | }, 311 | "80": { 312 | "$value": "#ebadb8", 313 | "$type": "color", 314 | "$description": "Colore di sistema" 315 | }, 316 | "90": { 317 | "$value": "#f5d6db", 318 | "$type": "color", 319 | "$description": "Colore di sistema" 320 | }, 321 | "96": { 322 | "$value": "#fbeff1", 323 | "$type": "color", 324 | "$description": "Colore di sistema" 325 | } 326 | }, 327 | "emerald": { 328 | "15": { 329 | "$value": "#004d33", 330 | "$type": "color", 331 | "$description": "Colore di sistema" 332 | }, 333 | "20": { 334 | "$value": "#006644", 335 | "$type": "color", 336 | "$description": "Colore di sistema" 337 | }, 338 | "25": { 339 | "$value": "#008055", 340 | "$type": "color", 341 | "$description": "Colore di sistema - valore base" 342 | }, 343 | "35": { 344 | "$value": "#00b377", 345 | "$type": "color", 346 | "$description": "Colore di sistema" 347 | }, 348 | "40": { 349 | "$value": "#00cc88", 350 | "$type": "color", 351 | "$description": "Colore di sistema" 352 | }, 353 | "48": { 354 | "$value": "#22d499", 355 | "$type": "color", 356 | "$description": "Colore di sistema" 357 | }, 358 | "57": { 359 | "$value": "#43e0ac", 360 | "$type": "color", 361 | "$description": "Colore di sistema" 362 | }, 363 | "67": { 364 | "$value": "#6ee7bf", 365 | "$type": "color", 366 | "$description": "Colore di sistema" 367 | }, 368 | "77": { 369 | "$value": "#99eed2", 370 | "$type": "color", 371 | "$description": "Colore di sistema" 372 | }, 373 | "87": { 374 | "$value": "#c8f6e7", 375 | "$type": "color", 376 | "$description": "Colore di sistema" 377 | } 378 | }, 379 | "orange": { 380 | "20": { 381 | "$value": "#663d00", 382 | "$type": "color", 383 | "$description": "Colore di sistema" 384 | }, 385 | "25": { 386 | "$value": "#804d00", 387 | "$type": "color", 388 | "$description": "Colore di sistema" 389 | }, 390 | "30": { 391 | "$value": "#995c00", 392 | "$type": "color", 393 | "$description": "Colore di sistema" 394 | }, 395 | "35": { 396 | "$value": "#b36b00", 397 | "$type": "color", 398 | "$description": "Colore di sistema" 399 | }, 400 | "40": { 401 | "$value": "#cc7a00", 402 | "$type": "color", 403 | "$description": "Colore di sistema - valore base" 404 | }, 405 | "48": { 406 | "$value": "#d48d22", 407 | "$type": "color", 408 | "$description": "Colore di sistema" 409 | }, 410 | "57": { 411 | "$value": "#e0a243", 412 | "$type": "color", 413 | "$description": "Colore di sistema" 414 | }, 415 | "67": { 416 | "$value": "#e7b66e", 417 | "$type": "color", 418 | "$description": "Colore di sistema" 419 | }, 420 | "77": { 421 | "$value": "#eecd9a", 422 | "$type": "color", 423 | "$description": "Colore di sistema" 424 | }, 425 | "87": { 426 | "$value": "#f6e4c8", 427 | "$type": "color", 428 | "$description": "Colore di sistema" 429 | } 430 | }, 431 | "teal": { 432 | "20": { 433 | "$value": "#05615e", 434 | "$type": "color", 435 | "$description": "Colore di risalto" 436 | }, 437 | "26": { 438 | "$value": "#077f7b", 439 | "$type": "color", 440 | "$description": "Colore di risalto" 441 | }, 442 | "32": { 443 | "$value": "#089994", 444 | "$type": "color", 445 | "$description": "Colore di risalto" 446 | }, 447 | "36": { 448 | "$value": "#09afa9", 449 | "$type": "color", 450 | "$description": "Colore di risalto" 451 | }, 452 | "42": { 453 | "$value": "#0bcbc5", 454 | "$type": "color", 455 | "$description": "Colore di risalto" 456 | }, 457 | "50": { 458 | "$value": "#2bd6d0", 459 | "$type": "color", 460 | "$description": "Colore di risalto" 461 | }, 462 | "60": { 463 | "$value": "#52e0db", 464 | "$type": "color", 465 | "$description": "Colore di risalto" 466 | }, 467 | "70": { 468 | "$value": "#79ece8", 469 | "$type": "color", 470 | "$description": "Colore di risalto" 471 | }, 472 | "80": { 473 | "$value": "#a3f5f2", 474 | "$type": "color", 475 | "$description": "Colore di risalto" 476 | }, 477 | "90": { 478 | "$value": "#ccfffd", 479 | "$type": "color", 480 | "$description": "Colore di risalto" 481 | } 482 | } 483 | }, 484 | "font": { 485 | "sans": { 486 | "$value": "Titillium Web", 487 | "$type": "fontFamilies", 488 | "$description": "Famiglia font senza grazie" 489 | }, 490 | "serif": { 491 | "$value": "Lora", 492 | "$type": "fontFamilies", 493 | "$description": "Famiglia font con grazie" 494 | }, 495 | "mono": { 496 | "$value": "Roboto Mono", 497 | "$type": "fontFamilies", 498 | "$description": "Famiglia font mono spaziata" 499 | } 500 | }, 501 | "font-size": { 502 | "1": { 503 | "$value": "12px", 504 | "$type": "fontSizes", 505 | "$description": "Dimensione della scala tipografica" 506 | }, 507 | "2": { 508 | "$value": "14px", 509 | "$type": "fontSizes", 510 | "$description": "Dimensione della scala tipografica" 511 | }, 512 | "3": { 513 | "$value": "16px", 514 | "$type": "fontSizes", 515 | "$description": "Dimensione della scala tipografica" 516 | }, 517 | "4": { 518 | "$value": "18px", 519 | "$type": "fontSizes", 520 | "$description": "Dimensione della scala tipografica" 521 | }, 522 | "5": { 523 | "$value": "20px", 524 | "$type": "fontSizes", 525 | "$description": "Dimensione della scala tipografica" 526 | }, 527 | "6": { 528 | "$value": "24px", 529 | "$type": "fontSizes", 530 | "$description": "Dimensione della scala tipografica" 531 | }, 532 | "7": { 533 | "$value": "28px", 534 | "$type": "fontSizes", 535 | "$description": "Dimensione della scala tipografica" 536 | }, 537 | "8": { 538 | "$value": "32px", 539 | "$type": "fontSizes", 540 | "$description": "Dimensione della scala tipografica" 541 | }, 542 | "9": { 543 | "$value": "40px", 544 | "$type": "fontSizes", 545 | "$description": "Dimensione della scala tipografica" 546 | }, 547 | "10": { 548 | "$value": "48px", 549 | "$type": "fontSizes", 550 | "$description": "Dimensione della scala tipografica" 551 | }, 552 | "11": { 553 | "$value": "56px", 554 | "$type": "fontSizes", 555 | "$description": "Dimensione della scala tipografica" 556 | } 557 | }, 558 | "font-leading": { 559 | "1": { 560 | "$value": "110%", 561 | "$type": "lineHeights", 562 | "$description": "Spazio tra due righe di testo" 563 | }, 564 | "2": { 565 | "$value": "120%", 566 | "$type": "lineHeights", 567 | "$description": "Spazio tra due righe di testo" 568 | }, 569 | "3": { 570 | "$value": "130%", 571 | "$type": "lineHeights", 572 | "$description": "Spazio tra due righe di testo" 573 | }, 574 | "4": { 575 | "$value": "140%", 576 | "$type": "lineHeights", 577 | "$description": "Spazio tra due righe di testo" 578 | }, 579 | "5": { 580 | "$value": "150%", 581 | "$type": "lineHeights", 582 | "$description": "Spazio tra due righe di testo" 583 | } 584 | }, 585 | "font-tracking": { 586 | "short": { 587 | "$value": "-1px", 588 | "$type": "letterSpacing", 589 | "$description": "Spazio tra le lettere di un font" 590 | }, 591 | "narrow": { 592 | "$value": "-1.3px", 593 | "$type": "letterSpacing", 594 | "$description": "Spazio tra le lettere di un font" 595 | }, 596 | "tight": { 597 | "$value": "-2px", 598 | "$type": "letterSpacing", 599 | "$description": "Spazio tra le lettere di un font" 600 | }, 601 | "normal": { 602 | "$value": "0px", 603 | "$type": "letterSpacing", 604 | "$description": "Spazio tra le lettere di un font" 605 | } 606 | }, 607 | "font-weight": { 608 | "extra-light": { 609 | "$value": "200", 610 | "$type": "fontWeights", 611 | "$description": "Peso del font" 612 | }, 613 | "light": { 614 | "$value": "300", 615 | "$type": "fontWeights", 616 | "$description": "Peso del font" 617 | }, 618 | "regular": { 619 | "$value": "400", 620 | "$type": "fontWeights", 621 | "$description": "Peso del font" 622 | }, 623 | "semibold": { 624 | "$value": "600", 625 | "$type": "fontWeights", 626 | "$description": "Peso del font" 627 | }, 628 | "bold": { 629 | "$value": "700", 630 | "$type": "fontWeights", 631 | "$description": "Peso del font" 632 | } 633 | }, 634 | "radius": { 635 | "smooth": { 636 | "$value": "4px", 637 | "$type": "borderRadius", 638 | "$description": "Raggio di un bordo" 639 | }, 640 | "circle": { 641 | "$value": "80px", 642 | "$type": "borderRadius", 643 | "$description": "Raggio di un bordo" 644 | }, 645 | "rounded": { 646 | "$value": "40px", 647 | "$type": "borderRadius", 648 | "$description": "Raggio di un bordo" 649 | } 650 | }, 651 | "spacing": { 652 | "1x": { 653 | "$value": "4px", 654 | "$type": "spacing", 655 | "$description": "Dimensione baseline" 656 | }, 657 | "2x": { 658 | "$value": "8px", 659 | "$type": "spacing", 660 | "$description": "2x la dimensione della baseline" 661 | }, 662 | "3x": { 663 | "$value": "12px", 664 | "$type": "spacing", 665 | "$description": "3x la dimensione della baseline" 666 | }, 667 | "4x": { 668 | "$value": "16px", 669 | "$type": "spacing", 670 | "$description": "4x la dimensione della baseline" 671 | }, 672 | "5x": { 673 | "$value": "20px", 674 | "$type": "spacing", 675 | "$description": "5x la dimensione della baseline" 676 | }, 677 | "6x": { 678 | "$value": "24px", 679 | "$type": "spacing", 680 | "$description": "6x la dimensione della baseline" 681 | }, 682 | "8x": { 683 | "$value": "32px", 684 | "$type": "spacing", 685 | "$description": "8x la dimensione della baseline" 686 | }, 687 | "10x": { 688 | "$value": "40px", 689 | "$type": "spacing", 690 | "$description": "10x la dimensione della baseline" 691 | }, 692 | "12x": { 693 | "$value": "48px", 694 | "$type": "spacing", 695 | "$description": "12x la dimensione della baseline" 696 | }, 697 | "14x": { 698 | "$value": "56px", 699 | "$type": "spacing", 700 | "$description": "14x la dimensione della baseline" 701 | }, 702 | "16x": { 703 | "$value": "64px", 704 | "$type": "spacing", 705 | "$description": "16x la dimensione della baseline" 706 | }, 707 | "24x": { 708 | "$value": "96px", 709 | "$type": "spacing", 710 | "$description": "24x la dimensione della baseline" 711 | } 712 | }, 713 | "sizing": { 714 | "quarter": { 715 | "$value": "25%", 716 | "$type": "sizing", 717 | "$description": "Dimensione di un quarto rispetto all'elemento contenitore" 718 | }, 719 | "half": { 720 | "$value": "50%", 721 | "$type": "sizing", 722 | "$description": "Dimensione della metà rispetto all'elemento contenitorer" 723 | }, 724 | "two-thirds": { 725 | "$value": "75%", 726 | "$type": "sizing", 727 | "$description": "Dimensione di un tre/quarti rispetto all'elemento contenitorer" 728 | }, 729 | "full": { 730 | "$value": "100%", 731 | "$type": "sizing", 732 | "$description": "Dimensione del 100% rispetto all'elemento contenitore" 733 | } 734 | }, 735 | "shadow": { 736 | "blur": { 737 | "s": { 738 | "$value": "4px", 739 | "$type": "dimension", 740 | "$description": "Raggio di sfocatura dell'ombreggiatura" 741 | }, 742 | "m": { 743 | "$value": "16px", 744 | "$type": "dimension", 745 | "$description": "Raggio di sfocatura dell'ombreggiatura" 746 | }, 747 | "l": { 748 | "$value": "48px", 749 | "$type": "dimension", 750 | "$description": "Raggio di sfocatura dell'ombreggiatura" 751 | } 752 | }, 753 | "offset": { 754 | "s": { 755 | "$value": "4px", 756 | "$type": "dimension", 757 | "$description": "Offset dell'ombreggiatura" 758 | }, 759 | "m": { 760 | "$value": "8px", 761 | "$type": "dimension", 762 | "$description": "Offset dell'ombreggiatura" 763 | }, 764 | "l": { 765 | "$value": "16px", 766 | "$type": "dimension", 767 | "$description": "Offset dell'ombreggiatura" 768 | } 769 | } 770 | } 771 | } -------------------------------------------------------------------------------- /dist/scss/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Do not edit directly, this file was auto-generated. 3 | 4 | $it-border-base: 1px; // Dimensione base di un bordo. 5 | $it-border-double: 2px; // Dimensione doppia di un bordo. 6 | $it-border-thick: 4px; // Dimensione spessa di un bordo. 7 | $it-border-broad: 8px; // Dimensione larga di un bordo. 8 | $it-color-black-10: rgba(0, 0, 0, 0.1); // Colore neutro 9 | $it-color-black-15: rgba(0, 0, 0, 0.15); // Colore neutro 10 | $it-color-black-25: rgba(0, 0, 0, 0.25); // Colore neutro 11 | $it-color-black-50: rgba(0, 0, 0, 0.5); // Colore neutro 12 | $it-color-black-85: rgba(0, 0, 0, 0.85); // Colore neutro 13 | $it-color-black-100: #000000; // Colore neutro 14 | $it-color-black-05: rgba(0, 0, 0, 0.05); // Colore neutro 15 | $it-color-white: #ffffff; // Colore neutro 16 | $it-color-blue-20: #003366; // Colore tema default 17 | $it-color-blue-25: #004080; // Colore tema default 18 | $it-color-blue-30: #004d99; // Colore tema default 19 | $it-color-blue-40: #0066cc; // Colore tema default - valore base 20 | $it-color-blue-48: #207ad5; // Colore tema default 21 | $it-color-blue-57: #4392e0; // Colore tema default 22 | $it-color-blue-67: #6aaaeb; // Colore tema default 23 | $it-color-blue-77: #94c4f5; // Colore tema default 24 | $it-color-blue-87: #bfdfff; // Colore tema default 25 | $it-color-blue-97: #f2f7fc; // Colore tema default 26 | $it-color-seagreen-10: #003121; // Colore tema secondario 27 | $it-color-seagreen-14: #004931; // Colore tema secondario 28 | $it-color-seagreen-19: #006242; // Colore tema secondario 29 | $it-color-seagreen-24: #007a52; // Colore tema secondario - valore base 30 | $it-color-seagreen-39: #329574; // Colore tema secondario 31 | $it-color-seagreen-54: #64af96; // Colore tema secondario 32 | $it-color-seagreen-69: #96cab9; // Colore tema secondario 33 | $it-color-seagreen-76: #afd7ca; // Colore tema secondario 34 | $it-color-seagreen-84: #c8e4db; // Colore tema secondario 35 | $it-color-seagreen-92: #e1f2ec; // Colore tema secondario 36 | $it-color-slate-20: #17324d; // Colore neutro 37 | $it-color-slate-28: #2f475e; // Colore neutro 38 | $it-color-slate-36: #455b71; // Colore neutro 39 | $it-color-slate-44: #5c6f82; // Colore neutro - valore base 40 | $it-color-slate-52: #768594; // Colore neutro 41 | $it-color-slate-62: #929da9; // Colore neutro 42 | $it-color-slate-68: #a3adb7; // Colore neutro 43 | $it-color-slate-78: #c5c7c9; // Colore neutro 44 | $it-color-slate-85: #d9dadb; // Colore neutro 45 | $it-color-slate-93: #ebeced; // Colore neutro 46 | $it-color-gray-10: #1a1a1a; // Colore neutro 47 | $it-color-gray-15: #262626; // Colore neutro - valore base 48 | $it-color-gray-25: #404040; // Colore neutro 49 | $it-color-gray-32: #525252; // Colore neutro 50 | $it-color-gray-45: #737373; // Colore neutro 51 | $it-color-gray-64: #a3a3a3; // Colore neutro 52 | $it-color-gray-83: #d4d4d4; // Colore neutro 53 | $it-color-gray-90: #e5e5e5; // Colore neutro 54 | $it-color-gray-96: #f5f5f5; // Colore neutro 55 | $it-color-gray-98: #fafafa; // Colore neutro 56 | $it-color-red-25: #661a26; // Colore di sistema 57 | $it-color-red-30: #7a1f2e; // Colore di sistema 58 | $it-color-red-37: #992639; // Colore di sistema 59 | $it-color-red-44: #b32d43; // Colore di sistema 60 | $it-color-red-50: #cc334d; // Colore di sistema - valore base 61 | $it-color-red-60: #d65c70; // Colore di sistema 62 | $it-color-red-70: #e08593; // Colore di sistema 63 | $it-color-red-80: #ebadb8; // Colore di sistema 64 | $it-color-red-90: #f5d6db; // Colore di sistema 65 | $it-color-red-96: #fbeff1; // Colore di sistema 66 | $it-color-emerald-15: #004d33; // Colore di sistema 67 | $it-color-emerald-20: #006644; // Colore di sistema 68 | $it-color-emerald-25: #008055; // Colore di sistema - valore base 69 | $it-color-emerald-35: #00b377; // Colore di sistema 70 | $it-color-emerald-40: #00cc88; // Colore di sistema 71 | $it-color-emerald-48: #22d499; // Colore di sistema 72 | $it-color-emerald-57: #43e0ac; // Colore di sistema 73 | $it-color-emerald-67: #6ee7bf; // Colore di sistema 74 | $it-color-emerald-77: #99eed2; // Colore di sistema 75 | $it-color-emerald-87: #c8f6e7; // Colore di sistema 76 | $it-color-orange-20: #663d00; // Colore di sistema 77 | $it-color-orange-25: #804d00; // Colore di sistema 78 | $it-color-orange-30: #995c00; // Colore di sistema 79 | $it-color-orange-35: #b36b00; // Colore di sistema 80 | $it-color-orange-40: #cc7a00; // Colore di sistema - valore base 81 | $it-color-orange-48: #d48d22; // Colore di sistema 82 | $it-color-orange-57: #e0a243; // Colore di sistema 83 | $it-color-orange-67: #e7b66e; // Colore di sistema 84 | $it-color-orange-77: #eecd9a; // Colore di sistema 85 | $it-color-orange-87: #f6e4c8; // Colore di sistema 86 | $it-color-teal-20: #05615e; // Colore di risalto 87 | $it-color-teal-26: #077f7b; // Colore di risalto 88 | $it-color-teal-32: #089994; // Colore di risalto 89 | $it-color-teal-36: #09afa9; // Colore di risalto 90 | $it-color-teal-42: #0bcbc5; // Colore di risalto 91 | $it-color-teal-50: #2bd6d0; // Colore di risalto 92 | $it-color-teal-60: #52e0db; // Colore di risalto 93 | $it-color-teal-70: #79ece8; // Colore di risalto 94 | $it-color-teal-80: #a3f5f2; // Colore di risalto 95 | $it-color-teal-90: #ccfffd; // Colore di risalto 96 | $it-font-sans: 'Titillium Web'; // Famiglia font senza grazie 97 | $it-font-serif: Lora; // Famiglia font con grazie 98 | $it-font-mono: 'Roboto Mono'; // Famiglia font mono spaziata 99 | $it-font-size-1: 12px; // Dimensione della scala tipografica 100 | $it-font-size-2: 14px; // Dimensione della scala tipografica 101 | $it-font-size-3: 16px; // Dimensione della scala tipografica 102 | $it-font-size-4: 18px; // Dimensione della scala tipografica 103 | $it-font-size-5: 20px; // Dimensione della scala tipografica 104 | $it-font-size-6: 24px; // Dimensione della scala tipografica 105 | $it-font-size-7: 28px; // Dimensione della scala tipografica 106 | $it-font-size-8: 32px; // Dimensione della scala tipografica 107 | $it-font-size-9: 40px; // Dimensione della scala tipografica 108 | $it-font-size-10: 48px; // Dimensione della scala tipografica 109 | $it-font-size-11: 56px; // Dimensione della scala tipografica 110 | $it-font-leading-1: 1.1; // Spazio tra due righe di testo 111 | $it-font-leading-2: 1.2; // Spazio tra due righe di testo 112 | $it-font-leading-3: 1.3; // Spazio tra due righe di testo 113 | $it-font-leading-4: 1.4; // Spazio tra due righe di testo 114 | $it-font-leading-5: 1.5; // Spazio tra due righe di testo 115 | $it-font-tracking-short: -1px; // Spazio tra le lettere di un font 116 | $it-font-tracking-narrow: -1.3px; // Spazio tra le lettere di un font 117 | $it-font-tracking-tight: -2px; // Spazio tra le lettere di un font 118 | $it-font-tracking-normal: 0px; // Spazio tra le lettere di un font 119 | $it-font-weight-extra-light: 200; // Peso del font 120 | $it-font-weight-light: 300; // Peso del font 121 | $it-font-weight-regular: 400; // Peso del font 122 | $it-font-weight-semibold: 600; // Peso del font 123 | $it-font-weight-bold: 700; // Peso del font 124 | $it-radius-smooth: 4px; // Raggio di un bordo 125 | $it-radius-circle: 80px; // Raggio di un bordo 126 | $it-radius-rounded: 40px; // Raggio di un bordo 127 | $it-spacing-1x: 4px; // Dimensione baseline 128 | $it-spacing-2x: 8px; // 2x la dimensione della baseline 129 | $it-spacing-3x: 12px; // 3x la dimensione della baseline 130 | $it-spacing-4x: 16px; // 4x la dimensione della baseline 131 | $it-spacing-5x: 20px; // 5x la dimensione della baseline 132 | $it-spacing-6x: 24px; // 6x la dimensione della baseline 133 | $it-spacing-8x: 32px; // 8x la dimensione della baseline 134 | $it-spacing-10x: 40px; // 10x la dimensione della baseline 135 | $it-spacing-12x: 48px; // 12x la dimensione della baseline 136 | $it-spacing-14x: 56px; // 14x la dimensione della baseline 137 | $it-spacing-16x: 64px; // 16x la dimensione della baseline 138 | $it-spacing-24x: 96px; // 24x la dimensione della baseline 139 | $it-sizing-quarter: 25%; // Dimensione di un quarto rispetto all'elemento contenitore 140 | $it-sizing-half: 50%; // Dimensione della metà rispetto all'elemento contenitorer 141 | $it-sizing-two-thirds: 75%; // Dimensione di un tre/quarti rispetto all'elemento contenitorer 142 | $it-sizing-full: 100%; // Dimensione del 100% rispetto all'elemento contenitore 143 | $it-shadow-blur-s: 4px; // Raggio di sfocatura dell'ombreggiatura 144 | $it-shadow-blur-m: 16px; // Raggio di sfocatura dell'ombreggiatura 145 | $it-shadow-blur-l: 48px; // Raggio di sfocatura dell'ombreggiatura 146 | $it-shadow-offset-s: 4px; // Offset dell'ombreggiatura 147 | $it-shadow-offset-m: 8px; // Offset dell'ombreggiatura 148 | $it-shadow-offset-l: 16px; // Offset dell'ombreggiatura 149 | $it-icon-size-xs: 16px; // Dimensione icona molto piccola 150 | $it-icon-size-s: 24px; // Dimensione icona piccola 151 | $it-icon-size-m: 32px; // Dimensione icona media 152 | $it-icon-size-l: 48px; // Dimensione icona grande 153 | $it-icon-size-xl: 64px; // Dimensione icona molto grande 154 | $it-color-background-primary: $it-color-blue-40; // Sfondo primario, utilizzato per elementi interattivi (buttons, links) ed elementi caratterizzati con l’identità visiva. 155 | $it-color-background-primary-light: $it-color-blue-87; // Sfondo con contrasto leggero, utilizzato come alternativa al colore primario per elementi interattivi. 156 | $it-color-background-primary-lighter: $it-color-blue-97; // Sfondo di colore primario con contrasto ridotto, definisce una sezione o una parte di essa nel contesto della pagina. 157 | $it-color-background-primary-hover: $it-color-blue-30; // Sfondo utilizzato su componenti primari interattivi nello stato di :hover. 158 | $it-color-background-primary-active: $it-color-blue-20; // Sfondo utilizzato su componenti primari interattivi nello stato attivo e premuto. 159 | $it-color-background-primary-muted: $it-color-blue-30; // Sfondo utilizzato su sezioni di pagina. 160 | $it-color-background-primary-deep: $it-color-blue-20; // Sfondo utilizzato su sezioni di pagina. 161 | $it-color-background-secondary: $it-color-slate-44; // Sfondo alternativo, utilizzato per elementi interattivi secondari o per sezioni di una pagina. 162 | $it-color-background-secondary-hover: $it-color-slate-28; // Sfondo utilizzato su elementi interattivi secondari nello stato di :hover. 163 | $it-color-background-secondary-active: $it-color-slate-20; // Sfondo utilizzato su elementi interattivi secondari nello stato attivo e premuto. 164 | $it-color-background-secondary-light: $it-color-slate-68; // Sfondo colore secondario chiaro. 165 | $it-color-background-secondary-lighter: $it-color-slate-85; // Sfondo colore secondario molto chiaro. 166 | $it-color-background-accent: $it-color-teal-32; // Sfondo con colore di accento per elementi interattivi. 167 | $it-color-background-accent-hover: $it-color-teal-26; // Sfondo utilizzato su elementi interattivi di accento nello stato di :hover. 168 | $it-color-background-muted: $it-color-gray-96; // Sfondo con contrasto molto leggero, definisce sezioni di una pagina o paragrafi di testo. 169 | $it-color-background-inverse: $it-color-white; // Sfondo invertito, utilizzato in combinazione con uno sfondo pagina/sezione di tipo primary, secondary o con colori neutri. 170 | $it-color-background-disabled: $it-color-slate-85; // Sfondo per elementi interattivi disabilitati/disattivati 171 | $it-color-background-subtle: $it-color-gray-83; // Sfondo chiaro, utilizzato per definire sezioni di una pagina 172 | $it-color-background-emphasis: $it-color-slate-20; // Sfondo di enfasi, utilizzato per mettere in risalto precise sezioni di una pagina 173 | $it-color-background-success: $it-color-emerald-25; // Sfondo per uno stato di successo, utilizzato per elementi interattivi o sfondo di componenti. Il testo deve essere inverse 174 | $it-color-background-success-light: $it-color-emerald-87; // Sfondo di successo per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse 175 | $it-color-background-success-hover: $it-color-emerald-20; // Sfondo di successo, utilizzato per elementi interattivi nello stato di :hover 176 | $it-color-background-success-active: $it-color-emerald-15; // Sfondo di successo, utilizzato per elementi interattivi nello stato attivo e premuto. 177 | $it-color-background-warning: $it-color-orange-30; // Sfondo di allerta, utilizzato per elementi interattivi o componenti. Il testo deve essere inverse 178 | $it-color-background-warning-light: $it-color-orange-87; // Sfondo di allerta per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse 179 | $it-color-background-warning-hover: $it-color-orange-25; // Sfondo di allerta, utilizzato per elementi interattivi nello stato di :hover 180 | $it-color-background-warning-active: $it-color-orange-20; // Sfondo di allerta, utilizzato per elementi interattivi nello stato attivo e premuto. 181 | $it-color-background-danger: $it-color-red-50; // Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi o componenti. Il testo deve essere inverse. 182 | $it-color-background-danger-light: $it-color-red-96; // Sfondo di pericolo o errore per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse 183 | $it-color-background-danger-hover: $it-color-red-37; // Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi nello stato di :hover. 184 | $it-color-background-danger-active: $it-color-red-25; // Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi nello stato attivo e premuto. 185 | $it-color-border-primary: $it-color-blue-40; // Bordo primario, utilizzato per elementi interattivi cliccabili. 186 | $it-color-border-primary-hover: $it-color-blue-30; // Bordo primario per stato interattivo hover 187 | $it-color-border-primary-active: $it-color-blue-20; // Bordo primario per stato interattivo attivo e premuto. 188 | $it-color-border-secondary: $it-color-slate-44; // Bordo secondario, utilizzato per elementi interattivi cliccabili 189 | $it-color-border-secondary-hover: $it-color-slate-28; // Bordo secondario per stato interattivo hover 190 | $it-color-border-secondary-active: $it-color-slate-20; // Bordo secondario per stato interattivo attivo e premuto. 191 | $it-color-border-inverse: $it-color-white; // Bordo invertito, utilizzato su sfondo a contrasto di tipo primary, secondary o emphasis 192 | $it-color-border-disabled: $it-color-slate-85; // Bordo per elementi interattivi disabilitati 193 | $it-color-border-subtle: $it-color-slate-78; // Bordo separatore, delimita le sezioni di una pagina, componenti o singoli elementi 194 | $it-color-border-success: $it-color-emerald-25; // Bordo di successo, utilizzato per elementi interattivi o statici (alert, notifications, etc) 195 | $it-color-border-success-hover: $it-color-emerald-20; // Bordo di successo per stato interattivo hover 196 | $it-color-border-success-active: $it-color-emerald-15; // Bordo di successo per stato interattivo attivo e premuto. 197 | $it-color-border-warning: $it-color-orange-30; // Bordo di allerta, utilizzato per elementi interattivi o statici (vedi esempio success) 198 | $it-color-border-warning-hover: $it-color-orange-25; // Bordo di allerta per stato interattivo hover 199 | $it-color-border-warning-active: $it-color-orange-20; // Bordo di allerta per stato interattivo attivo e premuto. 200 | $it-color-border-danger: $it-color-red-50; // Colore di un bordo che avvisa di un pericolo o errore, utilizzato per elementi interattivi o statici (vedi esempio success) 201 | $it-color-border-danger-hover: $it-color-red-37; // Colore di sfondo che avvisa di un pericolo o errore per stato interattivo :hover. 202 | $it-color-border-danger-active: $it-color-red-25; // Colore di sfondo che avvisa di un pericolo o errore per stato attivo e premuto. 203 | $it-color-text-base: $it-color-gray-10; // Corpo pagina base 204 | $it-color-text-primary: $it-color-blue-40; // Testo con link 205 | $it-color-text-secondary: $it-color-slate-28; // Corpo pagina alternativo, contenuti di dettaglio, testo button secondary 206 | $it-color-text-muted: $it-color-slate-44; // Testo di supporto per contenuti molto brevi 207 | $it-color-text-disabled: $it-color-slate-44; // Testo disabilitato 208 | $it-color-text-success: $it-color-emerald-25; // Testo di successo, può essere anche interattivo (button, link) 209 | $it-color-text-success-hover: $it-color-emerald-20; // Testo di successo interattivo nello stato hover 210 | $it-color-text-success-active: $it-color-emerald-15; // Testo di successo interattivo nello stato attivo e premuto. 211 | $it-color-text-warning: $it-color-orange-30; // Testo di allerta, può essere anche interattivo (button, link) 212 | $it-color-text-warning-hover: $it-color-orange-25; // Testo di allerta interattivo nello stato hover 213 | $it-color-text-warning-active: $it-color-orange-20; // Testo di allerta interattivo nello stato attivo e premuto. 214 | $it-color-text-danger: $it-color-red-50; // Colore del testo per problema o errore, può essere anche interattivo (link, button) 215 | $it-color-text-danger-hover: $it-color-red-37; // Colore del testo per problema o errore interattivo nello stato hover 216 | $it-color-text-danger-active: $it-color-red-25; // Colore del testo per problema o errore interattivo nello stato attivo e premuto. 217 | $it-color-text-inverse: $it-color-white; // Testo invertito per sfondi a contrasto (primary, secondary, emphasis) 218 | $it-color-text-accent: $it-color-teal-32; // Testo di accento, alternativo al primary per elementi interattivi su sfondi a contrasto 219 | $it-color-link-base: $it-color-blue-40; // Colore base per i link 220 | $it-color-link-hover: $it-color-blue-30; // Colore per i link nello stato hover 221 | $it-color-link-active: $it-color-blue-20; // Colore per i link nello stato active 222 | $it-color-link-secondary: $it-color-slate-28; // Colore del link secondario, richiede sempre la sottolineatura. 223 | $it-color-link-secondary-hover: $it-color-slate-20; // Testo del button secondary nello stato hover 224 | $it-color-link-secondary-active: $it-color-slate-20; // Testo del button secondary nello stato attivo e premuto. 225 | $it-color-link-inverse: $it-color-white; // Colore per i link invertiti 226 | $it-color-link-disabled: $it-color-slate-85; // Colore per i link disabilitati 227 | $it-color-link-accent: $it-color-teal-32; // Colore di risalto per un link 228 | $it-color-link-accent-hover: $it-color-teal-26; // Colore di risalto per un link in stato hover. 229 | $it-color-outline-focus: $it-color-gray-10; // Colore di evidenziazione dello stato focus 230 | $it-color-shadow-whisper: $it-color-black-05; // Colore ombreggiatura leggermente visibile 231 | $it-color-shadow-soft: $it-color-black-10; // Colore ombreggiatura chiara 232 | $it-color-shadow-dark: $it-color-black-15; // Colore ombreggiatura molto visibile 233 | $it-spacing-3xs: $it-spacing-1x; // Valore 3-extra-small nella scala dimensionale per la spaziatura 234 | $it-spacing-xxs: $it-spacing-2x; // Valore extra-extra small nella scala dimensionale per la spaziatura 235 | $it-spacing-xs: $it-spacing-3x; // Valore extra small nella scala dimensionale per la spaziatura 236 | $it-spacing-s: $it-spacing-4x; // Valore small nella scala dimensionale per la spaziatura 237 | $it-spacing-m: $it-spacing-6x; // Valore medium nella scala dimensionale per la spaziatura 238 | $it-spacing-l: $it-spacing-8x; // Valore large nella scala dimensionale per la spaziatura 239 | $it-spacing-xl: $it-spacing-10x; // Valore extra-large nella scala dimensionale per la spaziatura 240 | $it-spacing-xxl: $it-spacing-12x; // Valore extra-extra-large nella scala dimensionale per la spaziatura 241 | $it-spacing-3xl: $it-spacing-24x; // Valore 3-extra-large nella scala dimensionale per la spaziatura 242 | $it-theme-italia-base: $it-color-blue-40; // Colore base del tema 243 | $it-theme-italia-light: $it-color-blue-87; // Colore del tema chiaro 244 | $it-theme-italia-lighter: $it-color-blue-97; // Colore del tema molto chiaro 245 | $it-theme-italia-subtle: $it-color-blue-30; // Colore del tema meno saturo 246 | $it-theme-italia-muted: $it-color-blue-25; // Colore del tema molto meno saturo 247 | $it-theme-italia-deep: $it-color-blue-20; // Colore del tema scuro 248 | $it-elevation-low: 0 $it-shadow-blur-s $it-shadow-offset-s 0 $it-color-shadow-whisper; 249 | $it-elevation-medium: 0 $it-shadow-offset-m $it-shadow-blur-m 0 $it-color-shadow-soft; 250 | $it-elevation-high: 0 $it-shadow-offset-l $it-shadow-blur-l 0 $it-color-shadow-dark; 251 | $it-code-font: $it-font-mono; // La famiglia di font predefinita per i blocchi di codice. 252 | $it-data-font: $it-font-mono; // La famiglia di font predefinita per il contenuto della visualizzazione dei dati. 253 | $it-heading-font-weight: $it-font-weight-bold; // Il peso di font predefinito per i titoli. 254 | $it-heading-font-weight-weak: $it-font-weight-semibold; // Il peso di font alternativo per i titoli secondari. 255 | $it-heading-leading: $it-font-leading-2; // Spazio tra le righe predefinito per i titoli. 256 | $it-body-leading: $it-font-leading-5; // Spazio tra le righe predefinito per il corpo del testo. 257 | $it-caption-leading: $it-font-leading-3; // Spazio tra le righe predefinito per le didascalie. 258 | $it-lead-leading: $it-font-leading-3; // Spazio tra le righe predefinito per il testo in primo piano. 259 | $it-heading-1-font-size: $it-font-size-9; // La dimensione di font predefinita per il titolo 1. 260 | $it-heading-1-font-size-l: $it-font-size-10; // La dimensione di font predefinita per il titolo 1 grande. 261 | $it-heading-2-font-size: $it-font-size-8; // La dimensione di font predefinita per il titolo 2. 262 | $it-heading-2-font-size-l: $it-font-size-9; // La dimensione di font predefinita per il titolo 2 grande. 263 | $it-heading-3-font-size-l: $it-font-size-8; // La dimensione di font predefinita per il titolo 3 grande. 264 | $it-heading-3-font-size: $it-font-size-7; // La dimensione di font predefinita per il titolo 3. 265 | $it-heading-4-font-size: $it-font-size-6; // La dimensione di font predefinita per il titolo 4. 266 | $it-heading-4-font-size-l: $it-font-size-7; // La dimensione di font predefinita per il titolo 4 grande. 267 | $it-heading-5-font-size: $it-font-size-5; // La dimensione di font predefinita per il titolo 5. 268 | $it-heading-5-font-size-l: $it-font-size-6; // La dimensione di font predefinita per il titolo 5 grande. 269 | $it-heading-6-font-size: $it-font-size-3; // La dimensione di font predefinita per il titolo 6. 270 | $it-heading-6-font-size-l: $it-font-size-4; // La dimensione di font predefinita per il titolo 6 grande. 271 | $it-body-font-size: $it-font-size-3; // La dimensione di font predefinita per il corpo del testo. 272 | $it-body-font-size-l: $it-font-size-4; // La dimensione di font predefinita per il corpo del testo grande. 273 | $it-caption-font-size: $it-font-size-2; // La dimensione di font predefinita per le didascalie. 274 | $it-lead-font-size: $it-font-size-5; // La dimensione di font predefinita per il testo in primo piano. 275 | $it-lead-font-size-l: $it-font-size-6; // La dimensione di font predefinita per il testo in primo piano grande. 276 | $it-label-font-size-xs: $it-font-size-1; // La dimensione di font predefinita per le etichette molto piccole. 277 | $it-label-font-size-s: $it-font-size-2; // La dimensione di font predefinita per le etichette piccole. 278 | $it-label-font-size: $it-font-size-3; // La dimensione di font predefinita per le etichette medie. 279 | $it-label-font-size-l: $it-font-size-4; // La dimensione di font predefinita per le etichette grandi. 280 | $it-label-leading: $it-font-leading-1; // Spazio tra le righe predefinito per le etichette. 281 | $it-body-font-weight: $it-font-weight-regular; 282 | $it-caption-font-weight-regular: $it-font-weight-regular; 283 | $it-caption-font-weight-semibold: $it-font-weight-semibold; 284 | $it-lead-font-weight: $it-font-weight-regular; 285 | $it-icon-default: $it-color-text-base; // Colore icona di base 286 | $it-icon-primary: $it-color-background-primary; // Colore icona con link 287 | $it-icon-primary-hover: $it-color-background-primary-hover; // Colore icona con link status hover 288 | $it-icon-primary-active: $it-color-background-primary-active; // Colore icona con link status attivo 289 | $it-icon-secondary: $it-color-background-secondary; // Colore icona di supporto 290 | $it-icon-secondary-hover: $it-color-background-secondary-hover; // Colore icona di supporto - status hover 291 | $it-icon-secondary-active: $it-color-background-secondary-active; // Colore icona di supporto - status attivo 292 | $it-icon-success: $it-color-background-success; // Colore icona di supporto per azioni avvenute con successo 293 | $it-icon-success-hover: $it-color-background-success-hover; // Colore icona di supporto per azioni avvenute con successo - status hover 294 | $it-icon-success-active: $it-color-background-success-active; // Colore icona di supporto per azioni avvenute con successo - status attivo 295 | $it-icon-warning: $it-color-background-warning; // Colore icona di supporto per comunicazioni che richiedono attenzione 296 | $it-icon-warning-hover: $it-color-background-warning-hover; // Colore icona di supporto per comunicazioni che richiedono attenzione - status hover 297 | $it-icon-warning-active: $it-color-background-warning-active; // Colore icona di supporto per comunicazioni che richiedono attenzione - status attivo 298 | $it-icon-danger: $it-color-background-danger; // Colore icona di supporto per azioni non andate a buon fine - status hover 299 | $it-icon-danger-hover: $it-color-background-danger-hover; // Colore icona di supporto per azioni non andate a buon fine - status hover 300 | $it-icon-danger-active: $it-color-background-danger-active; // Colore icona di supporto per azioni non andate a buon fine - status hover 301 | $it-icon-inverse: $it-color-background-inverse; // Colore icona dsabilitata 302 | $it-icon-disabled: $it-color-text-disabled; // Colore icona disabilitata. 303 | -------------------------------------------------------------------------------- /dist/css/variables.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly, this file was auto-generated. 3 | */ 4 | 5 | :root { 6 | --it-border-base: 1px; /** Dimensione base di un bordo. */ 7 | --it-border-double: 2px; /** Dimensione doppia di un bordo. */ 8 | --it-border-thick: 4px; /** Dimensione spessa di un bordo. */ 9 | --it-border-broad: 8px; /** Dimensione larga di un bordo. */ 10 | --it-color-black-10: rgba(0, 0, 0, 0.1); /** Colore neutro */ 11 | --it-color-black-15: rgba(0, 0, 0, 0.15); /** Colore neutro */ 12 | --it-color-black-25: rgba(0, 0, 0, 0.25); /** Colore neutro */ 13 | --it-color-black-50: rgba(0, 0, 0, 0.5); /** Colore neutro */ 14 | --it-color-black-85: rgba(0, 0, 0, 0.85); /** Colore neutro */ 15 | --it-color-black-100: #000000; /** Colore neutro */ 16 | --it-color-black-05: rgba(0, 0, 0, 0.05); /** Colore neutro */ 17 | --it-color-white: #ffffff; /** Colore neutro */ 18 | --it-color-blue-20: #003366; /** Colore tema default */ 19 | --it-color-blue-25: #004080; /** Colore tema default */ 20 | --it-color-blue-30: #004d99; /** Colore tema default */ 21 | --it-color-blue-40: #0066cc; /** Colore tema default - valore base */ 22 | --it-color-blue-48: #207ad5; /** Colore tema default */ 23 | --it-color-blue-57: #4392e0; /** Colore tema default */ 24 | --it-color-blue-67: #6aaaeb; /** Colore tema default */ 25 | --it-color-blue-77: #94c4f5; /** Colore tema default */ 26 | --it-color-blue-87: #bfdfff; /** Colore tema default */ 27 | --it-color-blue-97: #f2f7fc; /** Colore tema default */ 28 | --it-color-seagreen-10: #003121; /** Colore tema secondario */ 29 | --it-color-seagreen-14: #004931; /** Colore tema secondario */ 30 | --it-color-seagreen-19: #006242; /** Colore tema secondario */ 31 | --it-color-seagreen-24: #007a52; /** Colore tema secondario - valore base */ 32 | --it-color-seagreen-39: #329574; /** Colore tema secondario */ 33 | --it-color-seagreen-54: #64af96; /** Colore tema secondario */ 34 | --it-color-seagreen-69: #96cab9; /** Colore tema secondario */ 35 | --it-color-seagreen-76: #afd7ca; /** Colore tema secondario */ 36 | --it-color-seagreen-84: #c8e4db; /** Colore tema secondario */ 37 | --it-color-seagreen-92: #e1f2ec; /** Colore tema secondario */ 38 | --it-color-slate-20: #17324d; /** Colore neutro */ 39 | --it-color-slate-28: #2f475e; /** Colore neutro */ 40 | --it-color-slate-36: #455b71; /** Colore neutro */ 41 | --it-color-slate-44: #5c6f82; /** Colore neutro - valore base */ 42 | --it-color-slate-52: #768594; /** Colore neutro */ 43 | --it-color-slate-62: #929da9; /** Colore neutro */ 44 | --it-color-slate-68: #a3adb7; /** Colore neutro */ 45 | --it-color-slate-78: #c5c7c9; /** Colore neutro */ 46 | --it-color-slate-85: #d9dadb; /** Colore neutro */ 47 | --it-color-slate-93: #ebeced; /** Colore neutro */ 48 | --it-color-gray-10: #1a1a1a; /** Colore neutro */ 49 | --it-color-gray-15: #262626; /** Colore neutro - valore base */ 50 | --it-color-gray-25: #404040; /** Colore neutro */ 51 | --it-color-gray-32: #525252; /** Colore neutro */ 52 | --it-color-gray-45: #737373; /** Colore neutro */ 53 | --it-color-gray-64: #a3a3a3; /** Colore neutro */ 54 | --it-color-gray-83: #d4d4d4; /** Colore neutro */ 55 | --it-color-gray-90: #e5e5e5; /** Colore neutro */ 56 | --it-color-gray-96: #f5f5f5; /** Colore neutro */ 57 | --it-color-gray-98: #fafafa; /** Colore neutro */ 58 | --it-color-red-25: #661a26; /** Colore di sistema */ 59 | --it-color-red-30: #7a1f2e; /** Colore di sistema */ 60 | --it-color-red-37: #992639; /** Colore di sistema */ 61 | --it-color-red-44: #b32d43; /** Colore di sistema */ 62 | --it-color-red-50: #cc334d; /** Colore di sistema - valore base */ 63 | --it-color-red-60: #d65c70; /** Colore di sistema */ 64 | --it-color-red-70: #e08593; /** Colore di sistema */ 65 | --it-color-red-80: #ebadb8; /** Colore di sistema */ 66 | --it-color-red-90: #f5d6db; /** Colore di sistema */ 67 | --it-color-red-96: #fbeff1; /** Colore di sistema */ 68 | --it-color-emerald-15: #004d33; /** Colore di sistema */ 69 | --it-color-emerald-20: #006644; /** Colore di sistema */ 70 | --it-color-emerald-25: #008055; /** Colore di sistema - valore base */ 71 | --it-color-emerald-35: #00b377; /** Colore di sistema */ 72 | --it-color-emerald-40: #00cc88; /** Colore di sistema */ 73 | --it-color-emerald-48: #22d499; /** Colore di sistema */ 74 | --it-color-emerald-57: #43e0ac; /** Colore di sistema */ 75 | --it-color-emerald-67: #6ee7bf; /** Colore di sistema */ 76 | --it-color-emerald-77: #99eed2; /** Colore di sistema */ 77 | --it-color-emerald-87: #c8f6e7; /** Colore di sistema */ 78 | --it-color-orange-20: #663d00; /** Colore di sistema */ 79 | --it-color-orange-25: #804d00; /** Colore di sistema */ 80 | --it-color-orange-30: #995c00; /** Colore di sistema */ 81 | --it-color-orange-35: #b36b00; /** Colore di sistema */ 82 | --it-color-orange-40: #cc7a00; /** Colore di sistema - valore base */ 83 | --it-color-orange-48: #d48d22; /** Colore di sistema */ 84 | --it-color-orange-57: #e0a243; /** Colore di sistema */ 85 | --it-color-orange-67: #e7b66e; /** Colore di sistema */ 86 | --it-color-orange-77: #eecd9a; /** Colore di sistema */ 87 | --it-color-orange-87: #f6e4c8; /** Colore di sistema */ 88 | --it-color-teal-20: #05615e; /** Colore di risalto */ 89 | --it-color-teal-26: #077f7b; /** Colore di risalto */ 90 | --it-color-teal-32: #089994; /** Colore di risalto */ 91 | --it-color-teal-36: #09afa9; /** Colore di risalto */ 92 | --it-color-teal-42: #0bcbc5; /** Colore di risalto */ 93 | --it-color-teal-50: #2bd6d0; /** Colore di risalto */ 94 | --it-color-teal-60: #52e0db; /** Colore di risalto */ 95 | --it-color-teal-70: #79ece8; /** Colore di risalto */ 96 | --it-color-teal-80: #a3f5f2; /** Colore di risalto */ 97 | --it-color-teal-90: #ccfffd; /** Colore di risalto */ 98 | --it-font-sans: 'Titillium Web'; /** Famiglia font senza grazie */ 99 | --it-font-serif: Lora; /** Famiglia font con grazie */ 100 | --it-font-mono: 'Roboto Mono'; /** Famiglia font mono spaziata */ 101 | --it-font-size-1: 12px; /** Dimensione della scala tipografica */ 102 | --it-font-size-2: 14px; /** Dimensione della scala tipografica */ 103 | --it-font-size-3: 16px; /** Dimensione della scala tipografica */ 104 | --it-font-size-4: 18px; /** Dimensione della scala tipografica */ 105 | --it-font-size-5: 20px; /** Dimensione della scala tipografica */ 106 | --it-font-size-6: 24px; /** Dimensione della scala tipografica */ 107 | --it-font-size-7: 28px; /** Dimensione della scala tipografica */ 108 | --it-font-size-8: 32px; /** Dimensione della scala tipografica */ 109 | --it-font-size-9: 40px; /** Dimensione della scala tipografica */ 110 | --it-font-size-10: 48px; /** Dimensione della scala tipografica */ 111 | --it-font-size-11: 56px; /** Dimensione della scala tipografica */ 112 | --it-font-leading-1: 1.1; /** Spazio tra due righe di testo */ 113 | --it-font-leading-2: 1.2; /** Spazio tra due righe di testo */ 114 | --it-font-leading-3: 1.3; /** Spazio tra due righe di testo */ 115 | --it-font-leading-4: 1.4; /** Spazio tra due righe di testo */ 116 | --it-font-leading-5: 1.5; /** Spazio tra due righe di testo */ 117 | --it-font-tracking-short: -1px; /** Spazio tra le lettere di un font */ 118 | --it-font-tracking-narrow: -1.3px; /** Spazio tra le lettere di un font */ 119 | --it-font-tracking-tight: -2px; /** Spazio tra le lettere di un font */ 120 | --it-font-tracking-normal: 0px; /** Spazio tra le lettere di un font */ 121 | --it-font-weight-extra-light: 200; /** Peso del font */ 122 | --it-font-weight-light: 300; /** Peso del font */ 123 | --it-font-weight-regular: 400; /** Peso del font */ 124 | --it-font-weight-semibold: 600; /** Peso del font */ 125 | --it-font-weight-bold: 700; /** Peso del font */ 126 | --it-radius-smooth: 4px; /** Raggio di un bordo */ 127 | --it-radius-circle: 80px; /** Raggio di un bordo */ 128 | --it-radius-rounded: 40px; /** Raggio di un bordo */ 129 | --it-spacing-1x: 4px; /** Dimensione baseline */ 130 | --it-spacing-2x: 8px; /** 2x la dimensione della baseline */ 131 | --it-spacing-3x: 12px; /** 3x la dimensione della baseline */ 132 | --it-spacing-4x: 16px; /** 4x la dimensione della baseline */ 133 | --it-spacing-5x: 20px; /** 5x la dimensione della baseline */ 134 | --it-spacing-6x: 24px; /** 6x la dimensione della baseline */ 135 | --it-spacing-8x: 32px; /** 8x la dimensione della baseline */ 136 | --it-spacing-10x: 40px; /** 10x la dimensione della baseline */ 137 | --it-spacing-12x: 48px; /** 12x la dimensione della baseline */ 138 | --it-spacing-14x: 56px; /** 14x la dimensione della baseline */ 139 | --it-spacing-16x: 64px; /** 16x la dimensione della baseline */ 140 | --it-spacing-24x: 96px; /** 24x la dimensione della baseline */ 141 | --it-sizing-quarter: 25%; /** Dimensione di un quarto rispetto all'elemento contenitore */ 142 | --it-sizing-half: 50%; /** Dimensione della metà rispetto all'elemento contenitorer */ 143 | --it-sizing-two-thirds: 75%; /** Dimensione di un tre/quarti rispetto all'elemento contenitorer */ 144 | --it-sizing-full: 100%; /** Dimensione del 100% rispetto all'elemento contenitore */ 145 | --it-shadow-blur-s: 4px; /** Raggio di sfocatura dell'ombreggiatura */ 146 | --it-shadow-blur-m: 16px; /** Raggio di sfocatura dell'ombreggiatura */ 147 | --it-shadow-blur-l: 48px; /** Raggio di sfocatura dell'ombreggiatura */ 148 | --it-shadow-offset-s: 4px; /** Offset dell'ombreggiatura */ 149 | --it-shadow-offset-m: 8px; /** Offset dell'ombreggiatura */ 150 | --it-shadow-offset-l: 16px; /** Offset dell'ombreggiatura */ 151 | --it-icon-size-xs: 16px; /** Dimensione icona molto piccola */ 152 | --it-icon-size-s: 24px; /** Dimensione icona piccola */ 153 | --it-icon-size-m: 32px; /** Dimensione icona media */ 154 | --it-icon-size-l: 48px; /** Dimensione icona grande */ 155 | --it-icon-size-xl: 64px; /** Dimensione icona molto grande */ 156 | --it-color-background-primary: var(--it-color-blue-40); /** Sfondo primario, utilizzato per elementi interattivi (buttons, links) ed elementi caratterizzati con l’identità visiva. */ 157 | --it-color-background-primary-light: var(--it-color-blue-87); /** Sfondo con contrasto leggero, utilizzato come alternativa al colore primario per elementi interattivi. */ 158 | --it-color-background-primary-lighter: var(--it-color-blue-97); /** Sfondo di colore primario con contrasto ridotto, definisce una sezione o una parte di essa nel contesto della pagina. */ 159 | --it-color-background-primary-hover: var(--it-color-blue-30); /** Sfondo utilizzato su componenti primari interattivi nello stato di :hover. */ 160 | --it-color-background-primary-active: var(--it-color-blue-20); /** Sfondo utilizzato su componenti primari interattivi nello stato attivo e premuto. */ 161 | --it-color-background-primary-muted: var(--it-color-blue-30); /** Sfondo utilizzato su sezioni di pagina. */ 162 | --it-color-background-primary-deep: var(--it-color-blue-20); /** Sfondo utilizzato su sezioni di pagina. */ 163 | --it-color-background-secondary: var(--it-color-slate-44); /** Sfondo alternativo, utilizzato per elementi interattivi secondari o per sezioni di una pagina. */ 164 | --it-color-background-secondary-hover: var(--it-color-slate-28); /** Sfondo utilizzato su elementi interattivi secondari nello stato di :hover. */ 165 | --it-color-background-secondary-active: var(--it-color-slate-20); /** Sfondo utilizzato su elementi interattivi secondari nello stato attivo e premuto. */ 166 | --it-color-background-secondary-light: var(--it-color-slate-68); /** Sfondo colore secondario chiaro. */ 167 | --it-color-background-secondary-lighter: var(--it-color-slate-85); /** Sfondo colore secondario molto chiaro. */ 168 | --it-color-background-accent: var(--it-color-teal-32); /** Sfondo con colore di accento per elementi interattivi. */ 169 | --it-color-background-accent-hover: var(--it-color-teal-26); /** Sfondo utilizzato su elementi interattivi di accento nello stato di :hover. */ 170 | --it-color-background-muted: var(--it-color-gray-96); /** Sfondo con contrasto molto leggero, definisce sezioni di una pagina o paragrafi di testo. */ 171 | --it-color-background-inverse: var(--it-color-white); /** Sfondo invertito, utilizzato in combinazione con uno sfondo pagina/sezione di tipo primary, secondary o con colori neutri. */ 172 | --it-color-background-disabled: var(--it-color-slate-85); /** Sfondo per elementi interattivi disabilitati/disattivati */ 173 | --it-color-background-subtle: var(--it-color-gray-83); /** Sfondo chiaro, utilizzato per definire sezioni di una pagina */ 174 | --it-color-background-emphasis: var(--it-color-slate-20); /** Sfondo di enfasi, utilizzato per mettere in risalto precise sezioni di una pagina */ 175 | --it-color-background-success: var(--it-color-emerald-25); /** Sfondo per uno stato di successo, utilizzato per elementi interattivi o sfondo di componenti. Il testo deve essere inverse */ 176 | --it-color-background-success-light: var(--it-color-emerald-87); /** Sfondo di successo per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse */ 177 | --it-color-background-success-hover: var(--it-color-emerald-20); /** Sfondo di successo, utilizzato per elementi interattivi nello stato di :hover */ 178 | --it-color-background-success-active: var(--it-color-emerald-15); /** Sfondo di successo, utilizzato per elementi interattivi nello stato attivo e premuto. */ 179 | --it-color-background-warning: var(--it-color-orange-30); /** Sfondo di allerta, utilizzato per elementi interattivi o componenti. Il testo deve essere inverse */ 180 | --it-color-background-warning-light: var(--it-color-orange-87); /** Sfondo di allerta per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse */ 181 | --it-color-background-warning-hover: var(--it-color-orange-25); /** Sfondo di allerta, utilizzato per elementi interattivi nello stato di :hover */ 182 | --it-color-background-warning-active: var(--it-color-orange-20); /** Sfondo di allerta, utilizzato per elementi interattivi nello stato attivo e premuto. */ 183 | --it-color-background-danger: var(--it-color-red-50); /** Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi o componenti. Il testo deve essere inverse. */ 184 | --it-color-background-danger-light: var(--it-color-red-96); /** Sfondo di pericolo o errore per sezioni e componenti che prevedono contenuti medio/lunghi. Il testo può essere utilizzato in più varianti tranne che inverse */ 185 | --it-color-background-danger-hover: var(--it-color-red-37); /** Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi nello stato di :hover. */ 186 | --it-color-background-danger-active: var(--it-color-red-25); /** Colore di sfondo che avvisa di un pericolo o errore, utilizzato per elementi interattivi nello stato attivo e premuto. */ 187 | --it-color-border-primary: var(--it-color-blue-40); /** Bordo primario, utilizzato per elementi interattivi cliccabili. */ 188 | --it-color-border-primary-hover: var(--it-color-blue-30); /** Bordo primario per stato interattivo hover */ 189 | --it-color-border-primary-active: var(--it-color-blue-20); /** Bordo primario per stato interattivo attivo e premuto. */ 190 | --it-color-border-secondary: var(--it-color-slate-44); /** Bordo secondario, utilizzato per elementi interattivi cliccabili */ 191 | --it-color-border-secondary-hover: var(--it-color-slate-28); /** Bordo secondario per stato interattivo hover */ 192 | --it-color-border-secondary-active: var(--it-color-slate-20); /** Bordo secondario per stato interattivo attivo e premuto. */ 193 | --it-color-border-inverse: var(--it-color-white); /** Bordo invertito, utilizzato su sfondo a contrasto di tipo primary, secondary o emphasis */ 194 | --it-color-border-disabled: var(--it-color-slate-85); /** Bordo per elementi interattivi disabilitati */ 195 | --it-color-border-subtle: var(--it-color-slate-78); /** Bordo separatore, delimita le sezioni di una pagina, componenti o singoli elementi */ 196 | --it-color-border-success: var(--it-color-emerald-25); /** Bordo di successo, utilizzato per elementi interattivi o statici (alert, notifications, etc) */ 197 | --it-color-border-success-hover: var(--it-color-emerald-20); /** Bordo di successo per stato interattivo hover */ 198 | --it-color-border-success-active: var(--it-color-emerald-15); /** Bordo di successo per stato interattivo attivo e premuto. */ 199 | --it-color-border-warning: var(--it-color-orange-30); /** Bordo di allerta, utilizzato per elementi interattivi o statici (vedi esempio success) */ 200 | --it-color-border-warning-hover: var(--it-color-orange-25); /** Bordo di allerta per stato interattivo hover */ 201 | --it-color-border-warning-active: var(--it-color-orange-20); /** Bordo di allerta per stato interattivo attivo e premuto. */ 202 | --it-color-border-danger: var(--it-color-red-50); /** Colore di un bordo che avvisa di un pericolo o errore, utilizzato per elementi interattivi o statici (vedi esempio success) */ 203 | --it-color-border-danger-hover: var(--it-color-red-37); /** Colore di sfondo che avvisa di un pericolo o errore per stato interattivo :hover. */ 204 | --it-color-border-danger-active: var(--it-color-red-25); /** Colore di sfondo che avvisa di un pericolo o errore per stato attivo e premuto. */ 205 | --it-color-text-base: var(--it-color-gray-10); /** Corpo pagina base */ 206 | --it-color-text-primary: var(--it-color-blue-40); /** Testo con link */ 207 | --it-color-text-secondary: var(--it-color-slate-28); /** Corpo pagina alternativo, contenuti di dettaglio, testo button secondary */ 208 | --it-color-text-muted: var(--it-color-slate-44); /** Testo di supporto per contenuti molto brevi */ 209 | --it-color-text-disabled: var(--it-color-slate-44); /** Testo disabilitato */ 210 | --it-color-text-success: var(--it-color-emerald-25); /** Testo di successo, può essere anche interattivo (button, link) */ 211 | --it-color-text-success-hover: var(--it-color-emerald-20); /** Testo di successo interattivo nello stato hover */ 212 | --it-color-text-success-active: var(--it-color-emerald-15); /** Testo di successo interattivo nello stato attivo e premuto. */ 213 | --it-color-text-warning: var(--it-color-orange-30); /** Testo di allerta, può essere anche interattivo (button, link) */ 214 | --it-color-text-warning-hover: var(--it-color-orange-25); /** Testo di allerta interattivo nello stato hover */ 215 | --it-color-text-warning-active: var(--it-color-orange-20); /** Testo di allerta interattivo nello stato attivo e premuto. */ 216 | --it-color-text-danger: var(--it-color-red-50); /** Colore del testo per problema o errore, può essere anche interattivo (link, button) */ 217 | --it-color-text-danger-hover: var(--it-color-red-37); /** Colore del testo per problema o errore interattivo nello stato hover */ 218 | --it-color-text-danger-active: var(--it-color-red-25); /** Colore del testo per problema o errore interattivo nello stato attivo e premuto. */ 219 | --it-color-text-inverse: var(--it-color-white); /** Testo invertito per sfondi a contrasto (primary, secondary, emphasis) */ 220 | --it-color-text-accent: var(--it-color-teal-32); /** Testo di accento, alternativo al primary per elementi interattivi su sfondi a contrasto */ 221 | --it-color-link-base: var(--it-color-blue-40); /** Colore base per i link */ 222 | --it-color-link-hover: var(--it-color-blue-30); /** Colore per i link nello stato hover */ 223 | --it-color-link-active: var(--it-color-blue-20); /** Colore per i link nello stato active */ 224 | --it-color-link-secondary: var(--it-color-slate-28); /** Colore del link secondario, richiede sempre la sottolineatura. */ 225 | --it-color-link-secondary-hover: var(--it-color-slate-20); /** Testo del button secondary nello stato hover */ 226 | --it-color-link-secondary-active: var(--it-color-slate-20); /** Testo del button secondary nello stato attivo e premuto. */ 227 | --it-color-link-inverse: var(--it-color-white); /** Colore per i link invertiti */ 228 | --it-color-link-disabled: var(--it-color-slate-85); /** Colore per i link disabilitati */ 229 | --it-color-link-accent: var(--it-color-teal-32); /** Colore di risalto per un link */ 230 | --it-color-link-accent-hover: var(--it-color-teal-26); /** Colore di risalto per un link in stato hover. */ 231 | --it-color-outline-focus: var(--it-color-gray-10); /** Colore di evidenziazione dello stato focus */ 232 | --it-color-shadow-whisper: var(--it-color-black-05); /** Colore ombreggiatura leggermente visibile */ 233 | --it-color-shadow-soft: var(--it-color-black-10); /** Colore ombreggiatura chiara */ 234 | --it-color-shadow-dark: var(--it-color-black-15); /** Colore ombreggiatura molto visibile */ 235 | --it-spacing-3xs: var(--it-spacing-1x); /** Valore 3-extra-small nella scala dimensionale per la spaziatura */ 236 | --it-spacing-xxs: var(--it-spacing-2x); /** Valore extra-extra small nella scala dimensionale per la spaziatura */ 237 | --it-spacing-xs: var(--it-spacing-3x); /** Valore extra small nella scala dimensionale per la spaziatura */ 238 | --it-spacing-s: var(--it-spacing-4x); /** Valore small nella scala dimensionale per la spaziatura */ 239 | --it-spacing-m: var(--it-spacing-6x); /** Valore medium nella scala dimensionale per la spaziatura */ 240 | --it-spacing-l: var(--it-spacing-8x); /** Valore large nella scala dimensionale per la spaziatura */ 241 | --it-spacing-xl: var(--it-spacing-10x); /** Valore extra-large nella scala dimensionale per la spaziatura */ 242 | --it-spacing-xxl: var(--it-spacing-12x); /** Valore extra-extra-large nella scala dimensionale per la spaziatura */ 243 | --it-spacing-3xl: var(--it-spacing-24x); /** Valore 3-extra-large nella scala dimensionale per la spaziatura */ 244 | --it-theme-italia-base: var(--it-color-blue-40); /** Colore base del tema */ 245 | --it-theme-italia-light: var(--it-color-blue-87); /** Colore del tema chiaro */ 246 | --it-theme-italia-lighter: var(--it-color-blue-97); /** Colore del tema molto chiaro */ 247 | --it-theme-italia-subtle: var(--it-color-blue-30); /** Colore del tema meno saturo */ 248 | --it-theme-italia-muted: var(--it-color-blue-25); /** Colore del tema molto meno saturo */ 249 | --it-theme-italia-deep: var(--it-color-blue-20); /** Colore del tema scuro */ 250 | --it-elevation-low: 0 var(--it-shadow-blur-s) var(--it-shadow-offset-s) 0 var(--it-color-shadow-whisper); 251 | --it-elevation-medium: 0 var(--it-shadow-offset-m) var(--it-shadow-blur-m) 0 var(--it-color-shadow-soft); 252 | --it-elevation-high: 0 var(--it-shadow-offset-l) var(--it-shadow-blur-l) 0 var(--it-color-shadow-dark); 253 | --it-code-font: var(--it-font-mono); /** La famiglia di font predefinita per i blocchi di codice. */ 254 | --it-data-font: var(--it-font-mono); /** La famiglia di font predefinita per il contenuto della visualizzazione dei dati. */ 255 | --it-heading-font-weight: var(--it-font-weight-bold); /** Il peso di font predefinito per i titoli. */ 256 | --it-heading-font-weight-weak: var(--it-font-weight-semibold); /** Il peso di font alternativo per i titoli secondari. */ 257 | --it-heading-leading: var(--it-font-leading-2); /** Spazio tra le righe predefinito per i titoli. */ 258 | --it-body-leading: var(--it-font-leading-5); /** Spazio tra le righe predefinito per il corpo del testo. */ 259 | --it-caption-leading: var(--it-font-leading-3); /** Spazio tra le righe predefinito per le didascalie. */ 260 | --it-lead-leading: var(--it-font-leading-3); /** Spazio tra le righe predefinito per il testo in primo piano. */ 261 | --it-heading-1-font-size: var(--it-font-size-9); /** La dimensione di font predefinita per il titolo 1. */ 262 | --it-heading-1-font-size-l: var(--it-font-size-10); /** La dimensione di font predefinita per il titolo 1 grande. */ 263 | --it-heading-2-font-size: var(--it-font-size-8); /** La dimensione di font predefinita per il titolo 2. */ 264 | --it-heading-2-font-size-l: var(--it-font-size-9); /** La dimensione di font predefinita per il titolo 2 grande. */ 265 | --it-heading-3-font-size-l: var(--it-font-size-8); /** La dimensione di font predefinita per il titolo 3 grande. */ 266 | --it-heading-3-font-size: var(--it-font-size-7); /** La dimensione di font predefinita per il titolo 3. */ 267 | --it-heading-4-font-size: var(--it-font-size-6); /** La dimensione di font predefinita per il titolo 4. */ 268 | --it-heading-4-font-size-l: var(--it-font-size-7); /** La dimensione di font predefinita per il titolo 4 grande. */ 269 | --it-heading-5-font-size: var(--it-font-size-5); /** La dimensione di font predefinita per il titolo 5. */ 270 | --it-heading-5-font-size-l: var(--it-font-size-6); /** La dimensione di font predefinita per il titolo 5 grande. */ 271 | --it-heading-6-font-size: var(--it-font-size-3); /** La dimensione di font predefinita per il titolo 6. */ 272 | --it-heading-6-font-size-l: var(--it-font-size-4); /** La dimensione di font predefinita per il titolo 6 grande. */ 273 | --it-body-font-size: var(--it-font-size-3); /** La dimensione di font predefinita per il corpo del testo. */ 274 | --it-body-font-size-l: var(--it-font-size-4); /** La dimensione di font predefinita per il corpo del testo grande. */ 275 | --it-caption-font-size: var(--it-font-size-2); /** La dimensione di font predefinita per le didascalie. */ 276 | --it-lead-font-size: var(--it-font-size-5); /** La dimensione di font predefinita per il testo in primo piano. */ 277 | --it-lead-font-size-l: var(--it-font-size-6); /** La dimensione di font predefinita per il testo in primo piano grande. */ 278 | --it-label-font-size-xs: var(--it-font-size-1); /** La dimensione di font predefinita per le etichette molto piccole. */ 279 | --it-label-font-size-s: var(--it-font-size-2); /** La dimensione di font predefinita per le etichette piccole. */ 280 | --it-label-font-size: var(--it-font-size-3); /** La dimensione di font predefinita per le etichette medie. */ 281 | --it-label-font-size-l: var(--it-font-size-4); /** La dimensione di font predefinita per le etichette grandi. */ 282 | --it-label-leading: var(--it-font-leading-1); /** Spazio tra le righe predefinito per le etichette. */ 283 | --it-body-font-weight: var(--it-font-weight-regular); 284 | --it-caption-font-weight-regular: var(--it-font-weight-regular); 285 | --it-caption-font-weight-semibold: var(--it-font-weight-semibold); 286 | --it-lead-font-weight: var(--it-font-weight-regular); 287 | --it-icon-default: var(--it-color-text-base); /** Colore icona di base */ 288 | --it-icon-primary: var(--it-color-background-primary); /** Colore icona con link */ 289 | --it-icon-primary-hover: var(--it-color-background-primary-hover); /** Colore icona con link status hover */ 290 | --it-icon-primary-active: var(--it-color-background-primary-active); /** Colore icona con link status attivo */ 291 | --it-icon-secondary: var(--it-color-background-secondary); /** Colore icona di supporto */ 292 | --it-icon-secondary-hover: var(--it-color-background-secondary-hover); /** Colore icona di supporto - status hover */ 293 | --it-icon-secondary-active: var(--it-color-background-secondary-active); /** Colore icona di supporto - status attivo */ 294 | --it-icon-success: var(--it-color-background-success); /** Colore icona di supporto per azioni avvenute con successo */ 295 | --it-icon-success-hover: var(--it-color-background-success-hover); /** Colore icona di supporto per azioni avvenute con successo - status hover */ 296 | --it-icon-success-active: var(--it-color-background-success-active); /** Colore icona di supporto per azioni avvenute con successo - status attivo */ 297 | --it-icon-warning: var(--it-color-background-warning); /** Colore icona di supporto per comunicazioni che richiedono attenzione */ 298 | --it-icon-warning-hover: var(--it-color-background-warning-hover); /** Colore icona di supporto per comunicazioni che richiedono attenzione - status hover */ 299 | --it-icon-warning-active: var(--it-color-background-warning-active); /** Colore icona di supporto per comunicazioni che richiedono attenzione - status attivo */ 300 | --it-icon-danger: var(--it-color-background-danger); /** Colore icona di supporto per azioni non andate a buon fine - status hover */ 301 | --it-icon-danger-hover: var(--it-color-background-danger-hover); /** Colore icona di supporto per azioni non andate a buon fine - status hover */ 302 | --it-icon-danger-active: var(--it-color-background-danger-active); /** Colore icona di supporto per azioni non andate a buon fine - status hover */ 303 | --it-icon-inverse: var(--it-color-background-inverse); /** Colore icona dsabilitata */ 304 | --it-icon-disabled: var(--it-color-text-disabled); /** Colore icona disabilitata. */ 305 | } 306 | --------------------------------------------------------------------------------