@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.
79 lines (78 loc) • 2.46 kB
JSON
{
"cosmetic": {
"boxShadow": {
"sm": {
"value": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
},
"sm-sharp": {
"value": "0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.05)"
},
"DEFAULT": {
"value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
},
"sharp": {
"value": "0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1)"
},
"md": {
"value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
},
"md-sharp": {
"value": "0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06)"
},
"lg": {
"value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
},
"lg-sharp": {
"value": "0 0 1px 1px rgb(0 0 0 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05)"
},
"xl": {
"value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
},
"2xl": {
"value": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
},
"inner": {
"value": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"
},
"none": {
"value": "0 0 rgb(0 0 0 / 0)"
},
"outline": {
"value": "0 0 0 1px rgb(var(--tone-neutral-01) / 0.3)"
},
"outline-50": {
"value": "0 0 0 2px rgb(var(--tone-neutral-01) / 0.3)"
},
"outline-75": {
"value": "0 0 0 3px rgb(var(--tone-neutral-01) / 0.3)"
},
"outline-100": {
"value": "0 0 0 4px rgb(var(--tone-neutral-01) / 0.3)"
},
"outline-light": {
"value": "0 0 0 1px rgb(var(--tone-neutral-01) / 0.15)"
},
"outline-light-50": {
"value": "0 0 0 2px rgb(var(--tone-neutral-01) / 0.15)"
},
"outline-light-75": {
"value": "0 0 0 3px rgb(var(--tone-neutral-01) / 0.15)"
},
"outline-light-100": {
"value": "0 0 0 4px rgb(var(--tone-neutral-01) / 0.15)"
},
"outline-strong": {
"value": "0 0 0 1px rgb(var(--tone-neutral-01) / 0.6)"
},
"outline-strong-50": {
"value": "0 0 0 2px rgb(var(--tone-neutral-01) / 0.6)"
},
"outline-strong-75": {
"value": "0 0 0 3px rgb(var(--tone-neutral-01) / 0.6)"
},
"outline-strong-100": {
"value": "0 0 0 4px rgb(var(--tone-neutral-01) / 0.6)"
}
}
}
}