@maggioli-design-system/design-tokens/dist/css/colors-rgb-tones.css

This is the Design Token library of Maggioli Design System, here you'll find all the visual data used around the libraries.

/*
@magma-design-system/design-tokens v13.7.1
Generated by Style Dictionary
Do not edit directly
Generated at Tue, 03 Jun 2025 08:08:46 GMT
*/

:root {
  --tone-slate-01: 28 34 42;
  --tone-slate-02: 33 41 50;
  --tone-slate-03: 54 65 81;
  --tone-slate-04: 71 85 106;
  --tone-slate-05: 95 115 143;
  --tone-slate-06: 149 164 184;
  --tone-slate-07: 207 213 223;
  --tone-slate-08: 226 230 236;
  --tone-slate-09: 241 243 246;
  --tone-slate-10: 247 248 250;
  --tone-slate: 255 255 255;
  --tone-grey-01: 31 33 38;
  --tone-grey-02: 37 40 46;
  --tone-grey-03: 59 64 73;
  --tone-grey-04: 78 85 96;
  --tone-grey-05: 105 114 130;
  --tone-grey-06: 156 163 175;
  --tone-grey-07: 210 213 218;
  --tone-grey-08: 230 231 234;
  --tone-grey-09: 242 243 245;
  --tone-grey-10: 248 248 249;
  --tone-grey: 255 255 255;
  --tone-zinc-01: 33 33 37;
  --tone-zinc-02: 40 40 44;
  --tone-zinc-03: 64 64 70;
  --tone-zinc-04: 84 84 92;
  --tone-zinc-05: 112 112 124;
  --tone-zinc-06: 161 161 170;
  --tone-zinc-07: 212 212 216;
  --tone-zinc-08: 230 230 232;
  --tone-zinc-09: 243 243 244;
  --tone-zinc-10: 248 248 249;
  --tone-zinc: 255 255 255;
  --tone-neutral-01: 33 33 33;
  --tone-neutral-02: 40 40 40;
  --tone-neutral-03: 64 64 64;
  --tone-neutral-04: 84 84 84;
  --tone-neutral-05: 113 113 113;
  --tone-neutral-06: 162 162 162;
  --tone-neutral-07: 212 212 212;
  --tone-neutral-08: 231 231 231;
  --tone-neutral-09: 243 243 243;
  --tone-neutral-10: 248 248 248;
  --tone-neutral: 255 255 255;
  --tone-stone-01: 35 33 32;
  --tone-stone-02: 42 40 38;
  --tone-stone-03: 68 64 61;
  --tone-stone-04: 89 83 79;
  --tone-stone-05: 120 112 108;
  --tone-stone-06: 167 161 157;
  --tone-stone-07: 215 212 210;
  --tone-stone-08: 232 230 229;
  --tone-stone-09: 244 243 242;
  --tone-stone-10: 249 248 248;
  --tone-stone: 255 255 255;
}

:root.pref-theme-dark {
  --tone-slate-01: 221 225 232;
  --tone-slate-02: 210 216 225;
  --tone-slate-03: 171 182 199;
  --tone-slate-04: 140 156 179;
  --tone-slate-05: 101 123 152;
  --tone-slate-06: 66 79 99;
  --tone-slate-07: 35 43 53;
  --tone-slate-08: 24 29 36;
  --tone-slate-09: 14 17 21;
  --tone-slate-10: 7 9 11;
  --tone-slate: 0 0 0;
  --tone-grey-01: 222 225 229;
  --tone-grey-02: 212 215 221;
  --tone-grey-03: 177 182 192;
  --tone-grey-04: 148 155 168;
  --tone-grey-05: 112 122 138;
  --tone-grey-06: 72 79 90;
  --tone-grey-07: 39 43 49;
  --tone-grey-08: 27 29 33;
  --tone-grey-09: 14 15 17;
  --tone-grey-10: 8 9 10;
  --tone-grey: 0 0 0;
  --tone-zinc-01: 224 224 227;
  --tone-zinc-02: 215 215 219;
  --tone-zinc-03: 181 181 189;
  --tone-zinc-04: 154 154 164;
  --tone-zinc-05: 121 121 133;
  --tone-zinc-06: 78 78 87;
  --tone-zinc-07: 42 42 46;
  --tone-zinc-08: 28 28 31;
  --tone-zinc-09: 17 17 19;
  --tone-zinc-10: 9 9 9;
  --tone-zinc: 0 0 0;
  --tone-neutral-01: 225 225 225;
  --tone-neutral-02: 216 216 216;
  --tone-neutral-03: 181 181 181;
  --tone-neutral-04: 155 155 155;
  --tone-neutral-05: 122 122 122;
  --tone-neutral-06: 78 78 78;
  --tone-neutral-07: 43 43 43;
  --tone-neutral-08: 29 29 29;
  --tone-neutral-09: 15 15 15;
  --tone-neutral-10: 9 9 9;
  --tone-neutral: 0 0 0;
  --tone-stone-01: 226 224 223;
  --tone-stone-02: 218 215 214;
  --tone-stone-03: 185 181 177;
  --tone-stone-04: 160 154 150;
  --tone-stone-05: 127 120 114;
  --tone-stone-06: 83 78 74;
  --tone-stone-07: 45 42 41;
  --tone-stone-08: 30 28 27;
  --tone-stone-09: 16 15 15;
  --tone-stone-10: 9 9 8;
  --tone-stone: 0 0 0;
}

@media (prefers-color-scheme: dark) {
  :root.pref-theme-system {
    --tone-slate-01: 221 225 232;
    --tone-slate-02: 210 216 225;
    --tone-slate-03: 171 182 199;
    --tone-slate-04: 140 156 179;
    --tone-slate-05: 101 123 152;
    --tone-slate-06: 66 79 99;
    --tone-slate-07: 35 43 53;
    --tone-slate-08: 24 29 36;
    --tone-slate-09: 14 17 21;
    --tone-slate-10: 7 9 11;
    --tone-slate: 0 0 0;
    --tone-grey-01: 222 225 229;
    --tone-grey-02: 212 215 221;
    --tone-grey-03: 177 182 192;
    --tone-grey-04: 148 155 168;
    --tone-grey-05: 112 122 138;
    --tone-grey-06: 72 79 90;
    --tone-grey-07: 39 43 49;
    --tone-grey-08: 27 29 33;
    --tone-grey-09: 14 15 17;
    --tone-grey-10: 8 9 10;
    --tone-grey: 0 0 0;
    --tone-zinc-01: 224 224 227;
    --tone-zinc-02: 215 215 219;
    --tone-zinc-03: 181 181 189;
    --tone-zinc-04: 154 154 164;
    --tone-zinc-05: 121 121 133;
    --tone-zinc-06: 78 78 87;
    --tone-zinc-07: 42 42 46;
    --tone-zinc-08: 28 28 31;
    --tone-zinc-09: 17 17 19;
    --tone-zinc-10: 9 9 9;
    --tone-zinc: 0 0 0;
    --tone-neutral-01: 225 225 225;
    --tone-neutral-02: 216 216 216;
    --tone-neutral-03: 181 181 181;
    --tone-neutral-04: 155 155 155;
    --tone-neutral-05: 122 122 122;
    --tone-neutral-06: 78 78 78;
    --tone-neutral-07: 43 43 43;
    --tone-neutral-08: 29 29 29;
    --tone-neutral-09: 15 15 15;
    --tone-neutral-10: 9 9 9;
    --tone-neutral: 0 0 0;
    --tone-stone-01: 226 224 223;
    --tone-stone-02: 218 215 214;
    --tone-stone-03: 185 181 177;
    --tone-stone-04: 160 154 150;
    --tone-stone-05: 127 120 114;
    --tone-stone-06: 83 78 74;
    --tone-stone-07: 45 42 41;
    --tone-stone-08: 30 28 27;
    --tone-stone-09: 16 15 15;
    --tone-stone-10: 9 9 8;
    --tone-stone: 0 0 0;
  }
}