Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Semantic tokens #1399

Closed
1 task done
AlessandroVecchi opened this issue Feb 17, 2025 · 4 comments
Closed
1 task done

Semantic tokens #1399

AlessandroVecchi opened this issue Feb 17, 2025 · 4 comments
Assignees
Labels
question Domande e curiosità

Comments

@AlessandroVecchi
Copy link

AlessandroVecchi commented Feb 17, 2025

Esiste già una discussione sul tema che ti interessa, o su un tema simile?

  • Ho verificato e non esiste

Versione della libreria

2.13.4

Cosa

Nel file _variables.scss sono ancora presenti una serie di variabili colore (che fino alla 2.12 erano nel file color_var) chiamati "Semantic tokens" con dei colori cablati e non relativi al primary del sito.

// SEMANTIC TOKENS =========================================================

// Backgrounds
$color-background-emphasis: hsl(210, 54%, 20%); // color-slate-20
$color-background-primary-lighter: hsl(210, 62%, 97%); // color-blue-97
$color-background-primary-hover: hsl(210, 100, 30); // color-blue-30
$color-background-secondary-hover: hsl(210, 33%, 28%); // color-slate-28
$color-background-secondary-lighter: hsl(210, 3%, 85%); // color-slate-85
$color-background-muted: $gray-100; // color-gray-96

// Borders
$color-border-secondary: hsl(210, 17%, 44%); // color-slate-44
$color-border-subtle: hsl(210, 4%, 78%); // color-slate-78
$color-border-warning: hsl(36, 100%, 30%); // color-orange-30

// Text
$color-text-primary-active: hsl(210, 100%, 15%); // color-blue-15
$color-text-primary-hover: hsl(210, 100%, 30%); // color-blue-30
$color-text-muted: hsl(210, 17%, 44%); // color-slate-44
$color-text-base: $gray-900; // color-gray-10
$color-text-secondary: hsl(210, 33%, 28%); // color-slate-28
$color-text-warning: hsl(36, 100%, 30%); // color-orange-30

Perché

I colori non sovrebbero essere relativi al blu italia ma al colore primary scelto per il sito

Contesto

No response

Altro

Dovrebbe essere sufficiente sostituirli con
(es.) $color-background-emphasis: hsl($primary-h, 54%, 20%); // color-slate-20

@AlessandroVecchi
Copy link
Author

Ci sono anche altre variabili colore definite con colore H 210

@Fupete
Copy link
Contributor

Fupete commented Feb 17, 2025

Domanda per @zetareticoli (te la assegno momentaneamente), che sta lavorando alla revisione dei tokens/variabili.

@zetareticoli
Copy link
Member

Ciao @AlessandroVecchi, nella #1310 stiamo riscrivendo tutte le variabili in ottica implementazione design tokens italia.

Questo porterà all'introduzione di CSS custom properties per la gestione del tema di Bootstrap Italia senza necessità di ricompilare tutto il *.scss.

@zetareticoli zetareticoli moved this from 📋 Backlog to 🔖 Ready in Design system .italia 🇮‍🇹 Mar 13, 2025
@zetareticoli
Copy link
Member

Chiudo perché già gestita in #1310

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Domande e curiosità
Projects
Status: ✅ Done
Development

No branches or pull requests

3 participants