develop
Design tokens
One way to bring them all.
Design tokens are constant and platform-agnostic shared values. This set of data-value dictionary is used to ensure a better consistency across different platforms and digital products, plus it solves the issue of hardcoding common values inside the code over and over.
Usage
Wanda's design tokens are generated for different platforms, this means that from a single source of truth — containing informations about colors, space, fonts, and more — we can generate platform-specific files which you can import and use.
For the web platform we provide two ways to use Wanda's design tokens, you can access them inside javascript or css by importing the relative file from the correct node_modules path.
CSS
Then you can get the tokens by using the token() notation as in the following example. Note that custom environment variables are replaced with the final token value at build-time, so they are not dynamic like custom properties.
.MyCustomComponent {
padding: token(--space-8);
border-radius: token(--radius-24);
color: hsl(token(--color-red-20) / 20%);
}As you may noticed color tokens are shipped as hsl colors but without the css hsl() notation. This is useful to handle different opacities by using the level 4 color module syntax like in the example above.
If you want to use the tokens in your code without using the PostCSS plugins, you can also import the css file directly and use the tokens as standard custom property:
@import "@wonderflow/tokens/platforms/web/tokens.css";Javascript
Design tokens are also available in JSON format, which you can import and use in your javascript code.
import tkns from "@wonderflow/tokens/platforms/web/tokens.json";
export const Component = () => (
<div style={{ color: `hsl(${tkns.color.blue[70]})` }} />
);Tokens list
{
"color": {
"blue": {
"0": "180 100% 95%",
"5": "187 100% 89%",
"10": "200 100% 83%",
"20": "206 72% 67%",
"30": "210 60% 54%",
"40": "214 66% 44%",
"50": "217 80% 35%",
"60": "219 93% 27%",
"70": "221 100% 22%",
"80": "222 100% 17%",
"90": "223 100% 12%",
"100": "223 100% 7%"
},
"cyan": {
"0": "186 100% 96%",
"5": "187 69% 85%",
"10": "187 65% 74%",
"20": "187 57% 58%",
"30": "187 52% 48%",
"40": "187 60% 40%",
"50": "187 64% 33%",
"60": "187 66% 27%",
"70": "187 66% 22%",
"80": "186 67% 18%",
"90": "187 66% 15%",
"100": "186 64% 12%"
},
"dipsy": {
"0": "81 55% 94%",
"5": "82 54% 84%",
"10": "83 53% 74%",
"20": "83 54% 64%",
"30": "83 54% 49%",
"40": "83 56% 43%",
"50": "83 60% 38%",
"60": "83 60% 32%",
"70": "83 80% 24%",
"80": "82 80% 20%",
"90": "82 68% 17%",
"100": "84 77% 12%"
},
"green": {
"0": "149 100% 91%",
"5": "145 95% 84%",
"10": "145 76% 75%",
"20": "146 62% 59%",
"30": "147 63% 46%",
"40": "149 83% 35%",
"50": "152 100% 28%",
"60": "156 100% 23%",
"70": "160 100% 18%",
"80": "166 100% 13%",
"90": "170 100% 8%",
"100": "177 100% 4%"
},
"indigo": {
"0": "240 60% 98%",
"5": "240 60% 95%",
"10": "240 57% 90%",
"20": "240 58% 85%",
"30": "240 52% 74%",
"40": "241 60% 63%",
"50": "241 60% 56%",
"60": "242 60% 48%",
"70": "241 60% 38%",
"80": "241 61% 27%",
"90": "241 61% 16%",
"100": "240 61% 12%"
},
"magenta": {
"0": "327 73% 97%",
"5": "324 70% 91%",
"10": "324 70% 84%",
"20": "324 70% 74%",
"30": "324 60% 64%",
"40": "324 60% 44%",
"50": "324 70% 38%",
"60": "324 70% 31%",
"70": "324 70% 25%",
"80": "323 71% 20%",
"90": "324 71% 16%",
"100": "324 70% 12%"
},
"mint": {
"0": "165 62% 95%",
"5": "165 61% 90%",
"10": "165 60% 82%",
"20": "166 59% 71%",
"30": "166 60% 55%",
"40": "166 60% 40%",
"50": "165 60% 35%",
"60": "165 59% 30%",
"70": "165 61% 24%",
"80": "165 63% 17%",
"90": "166 64% 13%",
"100": "166 61% 10%"
},
"primary": {
"0": "210 20% 98%",
"5": "220 19% 91%",
"10": "220 16% 85%",
"20": "219 14% 75%",
"30": "220 12% 66%",
"40": "221 10% 56%",
"50": "221 9% 49%",
"60": "221 10% 39%",
"70": "221 10% 30%",
"80": "219 13% 22%",
"90": "218 11% 14%",
"100": "225 11% 7%"
},
"purple": {
"0": "300 100% 98%",
"5": "298 94% 93%",
"10": "299 65% 87%",
"20": "298 47% 75%",
"30": "297 39% 64%",
"40": "298 32% 54%",
"50": "298 32% 46%",
"60": "298 35% 38%",
"70": "298 38% 31%",
"80": "298 41% 25%",
"90": "297 42% 18%",
"100": "298 43% 12%"
},
"red": {
"0": "343 100% 96%",
"5": "351 100% 88%",
"10": "351 100% 81%",
"20": "351 77% 64%",
"30": "351 66% 49%",
"40": "351 92% 37%",
"50": "351 100% 31%",
"60": "351 100% 25%",
"70": "351 100% 20%",
"80": "350 100% 15%",
"90": "350 100% 10%",
"100": "351 100% 5%"
},
"salmon": {
"0": "16 73% 97%",
"5": "15 70% 91%",
"10": "15 70% 83%",
"20": "15 69% 77%",
"30": "15 70% 68%",
"40": "14 70% 60%",
"50": "14 63% 53%",
"60": "15 66% 45%",
"70": "15 70% 37%",
"80": "14 70% 29%",
"90": "14 69% 19%",
"100": "14 70% 12%"
},
"support": {
"brand": "0 100% 44%",
"black": "0 0% 0%",
"white": "0 0% 100%"
},
"violet": {
"0": "257 47% 97%",
"5": "263 51% 92%",
"10": "262 50% 85%",
"20": "263 50% 75%",
"30": "263 50% 62%",
"40": "263 50% 49%",
"50": "263 50% 40%",
"60": "262 50% 34%",
"70": "262 49% 30%",
"80": "262 50% 24%",
"90": "263 50% 18%",
"100": "263 51% 12%"
},
"yellow": {
"0": "60 100% 89%",
"5": "46 100% 83%",
"10": "38 100% 77%",
"20": "31 89% 65%",
"30": "28 72% 53%",
"40": "26 82% 42%",
"50": "25 100% 34%",
"60": "24 100% 29%",
"70": "22 100% 24%",
"80": "22 100% 19%",
"90": "22 100% 15%",
"100": "21 100% 10%"
}
},
"breakpoint": {
"extra-small": "30em",
"small": "48em",
"medium": "60em",
"large": "80em",
"extra-large": "100em"
},
"container": {
"extra-large": "95.000rem",
"large": "76.000rem",
"medium": "57.000rem",
"small": "45.000rem",
"extra-small": "27.000rem"
},
"icon": {
"size": {
"12": "0.750rem",
"16": "1.000rem",
"18": "1.125rem",
"24": "1.500rem",
"32": "2.000rem",
"40": "2.500rem",
"48": "3.000rem",
"56": "3.500rem"
}
},
"radius": {
"4": "0.250rem",
"8": "0.500rem",
"16": "1.000rem",
"24": "1.500rem",
"32": "2.000rem",
"40": "2.500rem",
"48": "3.000rem"
},
"space": {
"2": "0.125rem",
"4": "0.250rem",
"8": "0.500rem",
"16": "1.000rem",
"24": "1.500rem",
"32": "2.000rem",
"40": "2.500rem",
"48": "3.000rem",
"56": "3.500rem",
"64": "4.000rem",
"72": "4.500rem",
"80": "5.000rem",
"88": "5.500rem",
"96": "6.000rem",
"104": "6.500rem",
"112": "7.000rem",
"120": "7.500rem",
"128": "8.000rem",
"136": "8.500rem",
"144": "9.000rem",
"152": "9.500rem",
"160": "10.000rem",
"168": "10.500rem",
"176": "11.000rem",
"184": "11.500rem",
"192": "12.000rem",
"200": "12.500rem"
},
"duration": {
"100": "0.10s",
"200": "0.20s",
"250": "0.25s",
"300": "0.30s",
"500": "0.50s",
"750": "0.75s",
"1000": "1.00s"
},
"easing": {
"standard": "cubic-bezier(0.3, 0.07, 0.34, 1)",
"entrance": "cubic-bezier(0, 0, 0.34, 1)",
"exit": "cubic-bezier(0.3, 0.07, 1, 1)"
},
"wds": {
"font": {
"family": {
"sans": "system-ui, sans-serif",
"mono": "monospace"
},
"size": {
"12": "0.75rem",
"14": "0.875rem",
"16": "1rem",
"20": "1.25rem",
"24": "1.5rem",
"28": "1.75rem",
"32": "2rem",
"40": "2.5rem",
"48": "3rem",
"56": "3.5rem",
"68": "4rem",
"80": "5rem",
"96": "6rem"
},
"weight": {
"heavy": "800",
"bold": "700",
"semibold": "600",
"regular": "400",
"light": "300"
}
},
"line": {
"height": {
"16": "1rem",
"20": "1.25rem",
"24": "1.5rem",
"28": "1.75rem",
"32": "2rem",
"36": "2.25rem",
"40": "2.5rem",
"48": "3rem",
"56": "3.5rem",
"64": "4rem",
"80": "5rem",
"96": "6rem",
"108": "6.75rem"
}
},
"letter": {
"spacing": {
"0": "0",
"16": "0.01rem",
"24": "0.015rem",
"32": "0.02rem"
}
}
}
}Tokens type
Every package from Wanda is built with Typescrip and we provide the required types for tokens so you can build your components safely matching all the tokens and values from the ds.
export type TokensTypes = {
colors: 'gray' | 'blue'|'cyan'|'dipsy'|'green'|'indigo'|'magenta'|'mint'|'purple'|'red'|'salmon'|'support'|'violet'|'yellow';
color: {
blue: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
cyan: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
dipsy: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
green: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
indigo: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
magenta: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
mint: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
primary: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
purple: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
red: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
salmon: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
support: 'brand' | 'black' | 'white';
violet: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
yellow: 0 | '0' | 5 | '5' | 10 | '10' | 20 | '20' | 30 | '30' | 40 | '40' | 50 | '50' | 60 | '60' | 70 | '70' | 80 | '80' | 90 | '90' | 100 | '100';
};
breakpoint: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large';
container: 'extra-large' | 'large' | 'medium' | 'small' | 'extra-small';
icon: {
size: 12 | '12' | 16 | '16' | 18 | '18' | 24 | '24' | 32 | '32' | 40 | '40' | 48 | '48' | 56 | '56';
};
radius: 4 | '4' | 8 | '8' | 16 | '16' | 24 | '24' | 32 | '32' | 40 | '40' | 48 | '48';
space: 2 | '2' | 4 | '4' | 8 | '8' | 16 | '16' | 24 | '24' | 32 | '32' | 40 | '40' | 48 | '48' | 56 | '56' | 64 | '64' | 72 | '72' | 80 | '80' | 88 | '88' | 96 | '96' | 104 | '104' | 112 | '112' | 120 | '120' | 128 | '128' | 136 | '136' | 144 | '144' | 152 | '152' | 160 | '160' | 168 | '168' | 176 | '176' | 184 | '184' | 192 | '192' | 200 | '200';
duration: 100 | '100' | 200 | '200' | 250 | '250' | 300 | '300' | 500 | '500' | 750 | '750' | 1000 | '1000';
easing: 'standard' | 'entrance' | 'exit';
wds: {
font: {
family: 'sans' | 'mono';
size: 12 | '12' | 14 | '14' | 16 | '16' | 20 | '20' | 24 | '24' | 28 | '28' | 32 | '32' | 40 | '40' | 48 | '48' | 56 | '56' | 68 | '68' | 80 | '80' | 96 | '96';
weight: 'heavy' | 'bold' | 'semibold' | 'regular' | 'light';
};
line: {
height: 16 | '16' | 20 | '20' | 24 | '24' | 28 | '28' | 32 | '32' | 36 | '36' | 40 | '40' | 48 | '48' | 56 | '56' | 64 | '64' | 80 | '80' | 96 | '96' | 108 | '108';
};
letter: {
spacing: 0 | '0' | 16 | '16' | 24 | '24' | 32 | '32';
};
};
};