@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 v14.1.0
Generated by Style Dictionary
Do not edit directly
Generated at Mon, 08 Jun 2026 14:52:24 GMT
*/

:root {
  --tone-porcelain-01: 0 0 0;
  --tone-porcelain-02: 35 43 53;
  --tone-porcelain-03: 53 65 81;
  --tone-porcelain-04: 75 90 113;
  --tone-porcelain-05: 98 118 147;
  --tone-porcelain-06: 149 163 184;
  --tone-porcelain-07: 174 185 201;
  --tone-porcelain-08: 201 208 219;
  --tone-porcelain-09: 225 229 235;
  --tone-porcelain-10: 236 238 242;
  --tone-porcelain: 255 255 255;
  --tone-kaolin-01: 0 0 0;
  --tone-kaolin-02: 39 42 48;
  --tone-kaolin-03: 59 64 73;
  --tone-kaolin-04: 83 90 103;
  --tone-kaolin-05: 108 118 134;
  --tone-kaolin-06: 155 162 175;
  --tone-kaolin-07: 180 185 194;
  --tone-kaolin-08: 205 208 215;
  --tone-kaolin-09: 227 229 232;
  --tone-kaolin-10: 237 238 241;
  --tone-kaolin: 255 255 255;
  --tone-neutral-01: 0 0 0;
  --tone-neutral-02: 42 42 42;
  --tone-neutral-03: 64 64 64;
  --tone-neutral-04: 89 89 89;
  --tone-neutral-05: 117 117 117;
  --tone-neutral-06: 162 162 162;
  --tone-neutral-07: 184 184 184;
  --tone-neutral-08: 208 208 208;
  --tone-neutral-09: 228 228 228;
  --tone-neutral-10: 238 238 238;
  --tone-neutral: 255 255 255;
  --tone-fireclay-01: 0 0 0;
  --tone-fireclay-02: 46 41 37;
  --tone-fireclay-03: 70 64 57;
  --tone-fireclay-04: 98 88 79;
  --tone-fireclay-05: 127 115 103;
  --tone-fireclay-06: 170 160 151;
  --tone-fireclay-07: 191 184 176;
  --tone-fireclay-08: 212 207 203;
  --tone-fireclay-09: 231 228 226;
  --tone-fireclay-10: 240 238 237;
  --tone-fireclay: 255 255 255;
  --tone-bisque-01: 0 0 0;
  --tone-bisque-02: 48 41 39;
  --tone-bisque-03: 73 61 58;
  --tone-bisque-04: 102 86 82;
  --tone-bisque-05: 133 112 106;
  --tone-bisque-06: 174 159 154;
  --tone-bisque-07: 194 182 179;
  --tone-bisque-08: 214 206 204;
  --tone-bisque-09: 232 228 227;
  --tone-bisque-10: 240 238 237;
  --tone-bisque: 255 255 255;
}

:root:not(.pref-theme-scheme-light).pref-theme-dark,
:root.pref-theme-scheme-dark {
  --tone-porcelain-01: 255 255 255;
  --tone-porcelain-02: 243 244 247;
  --tone-porcelain-03: 230 234 239;
  --tone-porcelain-04: 213 219 227;
  --tone-porcelain-05: 189 198 211;
  --tone-porcelain-06: 144 159 181;
  --tone-porcelain-07: 117 137 164;
  --tone-porcelain-08: 89 107 134;
  --tone-porcelain-09: 64 77 96;
  --tone-porcelain-10: 51 62 77;
  --tone-porcelain: 0 0 0;
  --tone-kaolin-01: 255 255 255;
  --tone-kaolin-02: 244 244 246;
  --tone-kaolin-03: 232 233 236;
  --tone-kaolin-04: 215 218 223;
  --tone-kaolin-05: 194 198 206;
  --tone-kaolin-06: 151 159 171;
  --tone-kaolin-07: 126 135 151;
  --tone-kaolin-08: 99 107 122;
  --tone-kaolin-09: 71 77 88;
  --tone-kaolin-10: 56 60 69;
  --tone-kaolin: 0 0 0;
  --tone-neutral-01: 255 255 255;
  --tone-neutral-02: 244 244 244;
  --tone-neutral-03: 233 233 233;
  --tone-neutral-04: 218 218 218;
  --tone-neutral-05: 197 197 197;
  --tone-neutral-06: 158 158 158;
  --tone-neutral-07: 134 134 134;
  --tone-neutral-08: 107 107 107;
  --tone-neutral-09: 76 76 76;
  --tone-neutral-10: 60 60 60;
  --tone-neutral: 0 0 0;
  --tone-fireclay-01: 255 255 255;
  --tone-fireclay-02: 246 244 243;
  --tone-fireclay-03: 236 233 231;
  --tone-fireclay-04: 221 217 214;
  --tone-fireclay-05: 203 197 190;
  --tone-fireclay-06: 167 156 146;
  --tone-fireclay-07: 145 132 120;
  --tone-fireclay-08: 115 105 94;
  --tone-fireclay-09: 83 75 68;
  --tone-fireclay-10: 66 59 53;
  --tone-fireclay: 0 0 0;
  --tone-bisque-01: 255 255 255;
  --tone-bisque-02: 246 245 244;
  --tone-bisque-03: 236 233 232;
  --tone-bisque-04: 223 216 215;
  --tone-bisque-05: 205 196 193;
  --tone-bisque-06: 171 155 150;
  --tone-bisque-07: 151 130 124;
  --tone-bisque-08: 121 103 97;
  --tone-bisque-09: 87 74 70;
  --tone-bisque-10: 69 58 55;
  --tone-bisque: 0 0 0;
}

@media (prefers-color-scheme: dark) {
  :root:not(.pref-theme-scheme-light).pref-theme-system,
  :root:not([data-magma-pref]) {
    --tone-porcelain-01: 255 255 255;
    --tone-porcelain-02: 243 244 247;
    --tone-porcelain-03: 230 234 239;
    --tone-porcelain-04: 213 219 227;
    --tone-porcelain-05: 189 198 211;
    --tone-porcelain-06: 144 159 181;
    --tone-porcelain-07: 117 137 164;
    --tone-porcelain-08: 89 107 134;
    --tone-porcelain-09: 64 77 96;
    --tone-porcelain-10: 51 62 77;
    --tone-porcelain: 0 0 0;
    --tone-kaolin-01: 255 255 255;
    --tone-kaolin-02: 244 244 246;
    --tone-kaolin-03: 232 233 236;
    --tone-kaolin-04: 215 218 223;
    --tone-kaolin-05: 194 198 206;
    --tone-kaolin-06: 151 159 171;
    --tone-kaolin-07: 126 135 151;
    --tone-kaolin-08: 99 107 122;
    --tone-kaolin-09: 71 77 88;
    --tone-kaolin-10: 56 60 69;
    --tone-kaolin: 0 0 0;
    --tone-neutral-01: 255 255 255;
    --tone-neutral-02: 244 244 244;
    --tone-neutral-03: 233 233 233;
    --tone-neutral-04: 218 218 218;
    --tone-neutral-05: 197 197 197;
    --tone-neutral-06: 158 158 158;
    --tone-neutral-07: 134 134 134;
    --tone-neutral-08: 107 107 107;
    --tone-neutral-09: 76 76 76;
    --tone-neutral-10: 60 60 60;
    --tone-neutral: 0 0 0;
    --tone-fireclay-01: 255 255 255;
    --tone-fireclay-02: 246 244 243;
    --tone-fireclay-03: 236 233 231;
    --tone-fireclay-04: 221 217 214;
    --tone-fireclay-05: 203 197 190;
    --tone-fireclay-06: 167 156 146;
    --tone-fireclay-07: 145 132 120;
    --tone-fireclay-08: 115 105 94;
    --tone-fireclay-09: 83 75 68;
    --tone-fireclay-10: 66 59 53;
    --tone-fireclay: 0 0 0;
    --tone-bisque-01: 255 255 255;
    --tone-bisque-02: 246 245 244;
    --tone-bisque-03: 236 233 232;
    --tone-bisque-04: 223 216 215;
    --tone-bisque-05: 205 196 193;
    --tone-bisque-06: 171 155 150;
    --tone-bisque-07: 151 130 124;
    --tone-bisque-08: 121 103 97;
    --tone-bisque-09: 87 74 70;
    --tone-bisque-10: 69 58 55;
    --tone-bisque: 0 0 0;
  }
}