@designid/tokens 0.4.6 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/bin/build.js +413 -76
  2. package/bin/watch.js +25 -2
  3. package/package.json +8 -11
  4. package/types/design-tokens.ts +1083 -0
  5. package/types/files.d.ts +116 -3
  6. package/types/index.d.ts +79 -0
  7. package/types/token.d.ts +31 -0
  8. package/types/typography.d.ts +51 -0
  9. package/types/utils.d.ts +49 -0
  10. package/bin/build-icons.js +0 -2
  11. package/example/tokens/border/composition.tokens.json +0 -31
  12. package/example/tokens/colors/brand/primary.tokens.json +0 -44
  13. package/example/tokens/colors/icon/mono.tokens.json +0 -15
  14. package/example/tokens/effect/shadow.tokens.json +0 -41
  15. package/example/tokens/font/family.tokens.json +0 -110
  16. package/example/tokens/font/h1.tokens.json +0 -59
  17. package/example/tokens/foundation.tokens.json +0 -145
package/example/tokens/font/h1.tokens.json DELETED
@@ -1,59 +0,0 @@
1
- {
2
- "io": {
3
- "font": {
4
- "h1": {
5
- "font": {
6
- "$name": "heading",
7
- "$description": "H1 Description",
8
- "$type": "typography",
9
- "$title": "H1",
10
- "$value": {
11
- "fontFamily": "{io.font.family.primary.main}, {io.font.family.primary.fallback}",
12
- "fontWeight": "{io.font.weight.primary.regular}",
13
- "fontSize": "{io.font.size.xl}/{io.font.lineHeight.xl}"
14
- },
15
- "$extensions": {
16
- "sort": ["fontWeight", "fontSize", "fontFamily"],
17
- "breakpoint": {
18
- "(min-width: {io.breakpoint.screen.width.sm})": {
19
- "fontFamily": "{io.font.family.primary.main}, {io.font.family.primary.fallback}",
20
- "fontWeight": "300",
21
- "fontSize": "32px/40px"
22
- },
23
- "screen and (min-width: 64rem)": {
24
- "fontFamily": "{io.font.family.primary.main}, {io.font.family.primary.fallback}",
25
- "fontWeight": "600",
26
- "fontSize": "64px/70px"
27
- }
28
- }
29
- }
30
- },
31
- "surface": {
32
- "$description": "H1 Surface",
33
- "$type": "color",
34
- "$value": "{io.color.brand.primary.nDefault}",
35
- "$extensions": {
36
- "breakpoint": {
37
- "screen and (min-width: 300px)": {
38
- "value": "red",
39
- "$extensions": {
40
- "mode": {
41
- "dark": "orange"
42
- }
43
- }
44
- },
45
- "screen and (min-width: 600px)": {
46
- "value": "blue",
47
- "$extensions": {
48
- "mode": {
49
- "dark": "green"
50
- }
51
- }
52
- }
53
- }
54
- }
55
- }
56
- }
57
- }
58
- }
59
- }
package/example/tokens/foundation.tokens.json DELETED
@@ -1,145 +0,0 @@
1
- {
2
- "io": {
3
- "$description": "Foundation tokens for the io design system.",
4
- "dimensions": {
5
- "tshirt": {
6
- "xs": {
7
- "$description": "Extra small t-shirt size.",
8
- "$type": "dimension",
9
- "$value": "0.25rem"
10
- },
11
- "sm": {
12
- "$description": "Small t-shirt size.",
13
- "$type": "dimension",
14
- "$value": "0.5rem"
15
- },
16
- "md": {
17
- "$description": "Medium t-shirt size.",
18
- "$type": "dimension",
19
- "$value": "0.75rem"
20
- },
21
- "base": {
22
- "$type": "dimension",
23
- "$value": "{io.dimensions.tshirt.lg}"
24
- },
25
- "lg": {
26
- "$description": "Large t-shirt size.",
27
- "$type": "dimension",
28
- "$value": "1rem"
29
- },
30
- "xl": {
31
- "$description": "Extra large t-shirt size.",
32
- "$type": "dimension",
33
- "$value": "1.25rem"
34
- },
35
- "xxl": {
36
- "$description": "Extra extra large t-shirt size.",
37
- "$type": "dimension",
38
- "$value": "1.5rem"
39
- }
40
- }
41
- },
42
- "spacing": {
43
- "custom": {
44
- "$description": "Custom spacing value, can be used for specific design needs.",
45
- "$type": "dimension",
46
- "$value": "0.5rem"
47
- },
48
- "xs": {
49
- "$description": "Extra small spacing.",
50
- "$type": "dimension",
51
- "$value": "{io.dimensions.tshirt.xs}"
52
- },
53
- "sm": {
54
- "$description": "Small spacing.",
55
- "$type": "dimension",
56
- "$value": "{io.dimensions.tshirt.sm}"
57
- },
58
- "md": {
59
- "$description": "Medium spacing.",
60
- "$type": "dimension",
61
- "$value": "{io.dimensions.tshirt.md}"
62
- },
63
- "lg": {
64
- "$description": "Large spacing.",
65
- "$type": "dimension",
66
- "$value": "{io.dimensions.tshirt.lg}"
67
- },
68
- "xl": {
69
- "$description": "Extra large spacing.",
70
- "$type": "dimension",
71
- "$value": "{io.dimensions.tshirt.xl}"
72
- },
73
- "xxl": {
74
- "$description": "Extra extra large spacing.",
75
- "$type": "dimension",
76
- "$value": "{io.dimensions.tshirt.xxl}"
77
- }
78
- },
79
- "sizing": {
80
- "xs": {
81
- "$description": "Extra small size.",
82
- "$type": "dimension",
83
- "$value": "{io.dimensions.tshirt.xs}"
84
- },
85
- "sm": {
86
- "$description": "Small size.",
87
- "$type": "dimension",
88
- "$value": "{io.dimensions.tshirt.sm}"
89
- },
90
- "md": {
91
- "$description": "Medium size.",
92
- "$type": "dimension",
93
- "$value": "{io.dimensions.tshirt.md}"
94
- },
95
- "lg": {
96
- "$description": "Large size.",
97
- "$type": "dimension",
98
- "$value": "{io.dimensions.tshirt.lg}"
99
- },
100
- "xl": {
101
- "$description": "Extra large size.",
102
- "$type": "dimension",
103
- "$value": "{io.dimensions.tshirt.xl}"
104
- },
105
- "xxl": {
106
- "$description": "Extra extra large size.",
107
- "$type": "dimension",
108
- "$value": "{io.dimensions.tshirt.xxl}"
109
- }
110
- },
111
- "breakpoint": {
112
- "$description": "Breakpoint sizes for viewports",
113
- "screen": {
114
- "width": {
115
- "xs": {
116
- "$type": "dimension",
117
- "$value": "0rem"
118
- },
119
- "sm": {
120
- "$type": "dimension",
121
- "$value": "40rem"
122
- },
123
- "lg": {
124
- "$type": "dimension",
125
- "$value": "64rem"
126
- }
127
- },
128
- "height": {
129
- "xs": {
130
- "$type": "dimension",
131
- "$value": "24rem"
132
- },
133
- "sm": {
134
- "$type": "dimension",
135
- "$value": "30rem"
136
- },
137
- "lg": {
138
- "$type": "dimension",
139
- "$value": "36rem"
140
- }
141
- }
142
- }
143
- }
144
- }
145
- }