@maggioli-design-system/design-tokens
Version:
This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.
185 lines (181 loc) • 6.08 kB
CSS
/*
@magma-design-system/design-tokens v14.1.0
Generated by Style Dictionary
Do not edit directly
Generated at Mon, 08 Jun 2026 14:52:24 GMT
*/
:root {
--hex-tone-porcelain-01: #000000;
--hex-tone-porcelain-02: #232b35;
--hex-tone-porcelain-03: #354151;
--hex-tone-porcelain-04: #4b5a71;
--hex-tone-porcelain-05: #627693;
--hex-tone-porcelain-06: #95a3b8;
--hex-tone-porcelain-07: #aeb9c9;
--hex-tone-porcelain-08: #c9d0db;
--hex-tone-porcelain-09: #e1e5eb;
--hex-tone-porcelain-10: #eceef2;
--hex-tone-porcelain: #ffffff;
--hex-tone-kaolin-01: #000000;
--hex-tone-kaolin-02: #272a30;
--hex-tone-kaolin-03: #3b4049;
--hex-tone-kaolin-04: #535a67;
--hex-tone-kaolin-05: #6c7686;
--hex-tone-kaolin-06: #9ba2af;
--hex-tone-kaolin-07: #b4b9c2;
--hex-tone-kaolin-08: #cdd0d7;
--hex-tone-kaolin-09: #e3e5e8;
--hex-tone-kaolin-10: #edeef1;
--hex-tone-kaolin: #ffffff;
--hex-tone-neutral-01: #000000;
--hex-tone-neutral-02: #2a2a2a;
--hex-tone-neutral-03: #404040;
--hex-tone-neutral-04: #595959;
--hex-tone-neutral-05: #757575;
--hex-tone-neutral-06: #a2a2a2;
--hex-tone-neutral-07: #b8b8b8;
--hex-tone-neutral-08: #d0d0d0;
--hex-tone-neutral-09: #e4e4e4;
--hex-tone-neutral-10: #eeeeee;
--hex-tone-neutral: #ffffff;
--hex-tone-fireclay-01: #000000;
--hex-tone-fireclay-02: #2e2925;
--hex-tone-fireclay-03: #464039;
--hex-tone-fireclay-04: #62584f;
--hex-tone-fireclay-05: #7f7367;
--hex-tone-fireclay-06: #aaa097;
--hex-tone-fireclay-07: #bfb8b0;
--hex-tone-fireclay-08: #d4cfcb;
--hex-tone-fireclay-09: #e7e4e2;
--hex-tone-fireclay-10: #f0eeed;
--hex-tone-fireclay: #ffffff;
--hex-tone-bisque-01: #000000;
--hex-tone-bisque-02: #302927;
--hex-tone-bisque-03: #493d3a;
--hex-tone-bisque-04: #665652;
--hex-tone-bisque-05: #85706a;
--hex-tone-bisque-06: #ae9f9a;
--hex-tone-bisque-07: #c2b6b3;
--hex-tone-bisque-08: #d6cecc;
--hex-tone-bisque-09: #e8e4e3;
--hex-tone-bisque-10: #f0eeed;
--hex-tone-bisque: #ffffff;
}
:root:not(.pref-theme-scheme-light).pref-theme-dark,
:root.pref-theme-scheme-dark {
--hex-tone-porcelain-01: #ffffff;
--hex-tone-porcelain-02: #f3f4f7;
--hex-tone-porcelain-03: #e6eaef;
--hex-tone-porcelain-04: #d5dbe3;
--hex-tone-porcelain-05: #bdc6d3;
--hex-tone-porcelain-06: #909fb5;
--hex-tone-porcelain-07: #7589a4;
--hex-tone-porcelain-08: #596b86;
--hex-tone-porcelain-09: #404d60;
--hex-tone-porcelain-10: #333e4d;
--hex-tone-porcelain: #000000;
--hex-tone-kaolin-01: #ffffff;
--hex-tone-kaolin-02: #f4f4f6;
--hex-tone-kaolin-03: #e8e9ec;
--hex-tone-kaolin-04: #d7dadf;
--hex-tone-kaolin-05: #c2c6ce;
--hex-tone-kaolin-06: #979fab;
--hex-tone-kaolin-07: #7e8797;
--hex-tone-kaolin-08: #636b7a;
--hex-tone-kaolin-09: #474d58;
--hex-tone-kaolin-10: #383c45;
--hex-tone-kaolin: #000000;
--hex-tone-neutral-01: #ffffff;
--hex-tone-neutral-02: #f4f4f4;
--hex-tone-neutral-03: #e9e9e9;
--hex-tone-neutral-04: #dadada;
--hex-tone-neutral-05: #c5c5c5;
--hex-tone-neutral-06: #9e9e9e;
--hex-tone-neutral-07: #868686;
--hex-tone-neutral-08: #6b6b6b;
--hex-tone-neutral-09: #4c4c4c;
--hex-tone-neutral-10: #3c3c3c;
--hex-tone-neutral: #000000;
--hex-tone-fireclay-01: #ffffff;
--hex-tone-fireclay-02: #f6f4f3;
--hex-tone-fireclay-03: #ece9e7;
--hex-tone-fireclay-04: #ddd9d6;
--hex-tone-fireclay-05: #cbc5be;
--hex-tone-fireclay-06: #a79c92;
--hex-tone-fireclay-07: #918478;
--hex-tone-fireclay-08: #73695e;
--hex-tone-fireclay-09: #534b44;
--hex-tone-fireclay-10: #423b35;
--hex-tone-fireclay: #000000;
--hex-tone-bisque-01: #ffffff;
--hex-tone-bisque-02: #f6f5f4;
--hex-tone-bisque-03: #ece9e8;
--hex-tone-bisque-04: #dfd8d7;
--hex-tone-bisque-05: #cdc4c1;
--hex-tone-bisque-06: #ab9b96;
--hex-tone-bisque-07: #97827c;
--hex-tone-bisque-08: #796761;
--hex-tone-bisque-09: #574a46;
--hex-tone-bisque-10: #453a37;
--hex-tone-bisque: #000000;
}
@media (prefers-color-scheme: dark) {
:root:not(.pref-theme-scheme-light).pref-theme-system,
:root:not([data-magma-pref]) {
--hex-tone-porcelain-01: #ffffff;
--hex-tone-porcelain-02: #f3f4f7;
--hex-tone-porcelain-03: #e6eaef;
--hex-tone-porcelain-04: #d5dbe3;
--hex-tone-porcelain-05: #bdc6d3;
--hex-tone-porcelain-06: #909fb5;
--hex-tone-porcelain-07: #7589a4;
--hex-tone-porcelain-08: #596b86;
--hex-tone-porcelain-09: #404d60;
--hex-tone-porcelain-10: #333e4d;
--hex-tone-porcelain: #000000;
--hex-tone-kaolin-01: #ffffff;
--hex-tone-kaolin-02: #f4f4f6;
--hex-tone-kaolin-03: #e8e9ec;
--hex-tone-kaolin-04: #d7dadf;
--hex-tone-kaolin-05: #c2c6ce;
--hex-tone-kaolin-06: #979fab;
--hex-tone-kaolin-07: #7e8797;
--hex-tone-kaolin-08: #636b7a;
--hex-tone-kaolin-09: #474d58;
--hex-tone-kaolin-10: #383c45;
--hex-tone-kaolin: #000000;
--hex-tone-neutral-01: #ffffff;
--hex-tone-neutral-02: #f4f4f4;
--hex-tone-neutral-03: #e9e9e9;
--hex-tone-neutral-04: #dadada;
--hex-tone-neutral-05: #c5c5c5;
--hex-tone-neutral-06: #9e9e9e;
--hex-tone-neutral-07: #868686;
--hex-tone-neutral-08: #6b6b6b;
--hex-tone-neutral-09: #4c4c4c;
--hex-tone-neutral-10: #3c3c3c;
--hex-tone-neutral: #000000;
--hex-tone-fireclay-01: #ffffff;
--hex-tone-fireclay-02: #f6f4f3;
--hex-tone-fireclay-03: #ece9e7;
--hex-tone-fireclay-04: #ddd9d6;
--hex-tone-fireclay-05: #cbc5be;
--hex-tone-fireclay-06: #a79c92;
--hex-tone-fireclay-07: #918478;
--hex-tone-fireclay-08: #73695e;
--hex-tone-fireclay-09: #534b44;
--hex-tone-fireclay-10: #423b35;
--hex-tone-fireclay: #000000;
--hex-tone-bisque-01: #ffffff;
--hex-tone-bisque-02: #f6f5f4;
--hex-tone-bisque-03: #ece9e8;
--hex-tone-bisque-04: #dfd8d7;
--hex-tone-bisque-05: #cdc4c1;
--hex-tone-bisque-06: #ab9b96;
--hex-tone-bisque-07: #97827c;
--hex-tone-bisque-08: #796761;
--hex-tone-bisque-09: #574a46;
--hex-tone-bisque-10: #453a37;
--hex-tone-bisque: #000000;
}
}