@metamask-previews/design-system-tailwind-preset 0.0.0-preview.52473ea

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 (36) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/LICENSE +20 -0
  3. package/README.md +63 -0
  4. package/dist/colors.cjs +70 -0
  5. package/dist/colors.cjs.map +1 -0
  6. package/dist/colors.d.cts +67 -0
  7. package/dist/colors.d.cts.map +1 -0
  8. package/dist/colors.d.mts +67 -0
  9. package/dist/colors.d.mts.map +1 -0
  10. package/dist/colors.mjs +67 -0
  11. package/dist/colors.mjs.map +1 -0
  12. package/dist/index.cjs +36 -0
  13. package/dist/index.cjs.map +1 -0
  14. package/dist/index.d.cts +4 -0
  15. package/dist/index.d.cts.map +1 -0
  16. package/dist/index.d.mts +4 -0
  17. package/dist/index.d.mts.map +1 -0
  18. package/dist/index.mjs +34 -0
  19. package/dist/index.mjs.map +1 -0
  20. package/dist/shadows.cjs +46 -0
  21. package/dist/shadows.cjs.map +1 -0
  22. package/dist/shadows.d.cts +30 -0
  23. package/dist/shadows.d.cts.map +1 -0
  24. package/dist/shadows.d.mts +30 -0
  25. package/dist/shadows.d.mts.map +1 -0
  26. package/dist/shadows.mjs +47 -0
  27. package/dist/shadows.mjs.map +1 -0
  28. package/dist/typography.cjs +168 -0
  29. package/dist/typography.cjs.map +1 -0
  30. package/dist/typography.d.cts +149 -0
  31. package/dist/typography.d.cts.map +1 -0
  32. package/dist/typography.d.mts +149 -0
  33. package/dist/typography.d.mts.map +1 -0
  34. package/dist/typography.mjs +165 -0
  35. package/dist/typography.mjs.map +1 -0
  36. package/package.json +72 -0
package/dist/typography.mjs ADDED
@@ -0,0 +1,165 @@
1
+ export const typography = {
2
+ fontSize: {
3
+ // small screen typography
4
+ 's-display-md': 'var(--typography-s-display-md-font-size)',
5
+ 's-heading-lg': 'var(--typography-s-heading-lg-font-size)',
6
+ 's-heading-md': 'var(--typography-s-heading-md-font-size)',
7
+ 's-heading-sm': 'var(--typography-s-heading-sm-font-size)',
8
+ 's-body-lg-medium': 'var(--typography-s-body-lg-medium-font-size)',
9
+ 's-body-lg-regular': 'var(--typography-s-body-lg-regular-font-size)',
10
+ 's-body-md-bold': 'var(--typography-s-body-md-bold-font-size)',
11
+ 's-body-md-medium': 'var(--typography-s-body-md-medium-font-size)',
12
+ 's-body-md': 'var(--typography-s-body-md-font-size)',
13
+ 's-body-sm-bold': 'var(--typography-s-body-sm-bold-font-size)',
14
+ 's-body-sm-medium': 'var(--typography-s-body-sm-medium-font-size)',
15
+ 's-body-sm': 'var(--typography-s-body-sm-font-size)',
16
+ 's-body-xs-medium': 'var(--typography-s-body-xs-medium-font-size)',
17
+ 's-body-xs': 'var(--typography-s-body-xs-font-size)',
18
+ // large screen typography
19
+ 'l-display-md': 'var(--typography-l-display-md-font-size)',
20
+ 'l-heading-lg': 'var(--typography-l-heading-lg-font-size)',
21
+ 'l-heading-md': 'var(--typography-l-heading-md-font-size)',
22
+ 'l-heading-sm': 'var(--typography-l-heading-sm-font-size)',
23
+ 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-font-size)',
24
+ 'l-body-md-bold': 'var(--typography-l-body-md-bold-font-size)',
25
+ 'l-body-md-medium': 'var(--typography-l-body-md-medium-font-size)',
26
+ 'l-body-md': 'var(--typography-l-body-md-font-size)',
27
+ 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-font-size)',
28
+ 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-font-size)',
29
+ 'l-body-sm': 'var(--typography-l-body-sm-font-size)',
30
+ 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-font-size)',
31
+ 'l-body-xs': 'var(--typography-l-body-xs-font-size)',
32
+ },
33
+ fontFamily: {
34
+ sans: [
35
+ 'Euclid Circular B',
36
+ 'Helvetica Neue',
37
+ 'Helvetica',
38
+ 'Arial',
39
+ 'sans-serif',
40
+ ],
41
+ // small screen typography
42
+ 's-display-md': 'var(--typography-s-display-md-font-family)',
43
+ 's-heading-lg': 'var(--typography-s-heading-lg-font-family)',
44
+ 's-heading-md': 'var(--typography-s-heading-md-font-family)',
45
+ 's-heading-sm': 'var(--typography-s-heading-sm-font-family)',
46
+ 's-body-lg-medium': 'var(--typography-s-body-lg-medium-font-family)',
47
+ 's-body-lg-regular': 'var(--typography-s-body-lg-regular-font-family)',
48
+ 's-body-md-bold': 'var(--typography-s-body-md-bold-font-family)',
49
+ 's-body-md-medium': 'var(--typography-s-body-md-medium-font-family)',
50
+ 's-body-md': 'var(--typography-s-body-md-font-family)',
51
+ 's-body-sm-bold': 'var(--typography-s-body-sm-bold-font-family)',
52
+ 's-body-sm-medium': 'var(--typography-s-body-sm-medium-font-family)',
53
+ 's-body-sm': 'var(--typography-s-body-sm-font-family)',
54
+ 's-body-xs-medium': 'var(--typography-s-body-xs-medium-font-family)',
55
+ 's-body-xs': 'var(--typography-s-body-xs-font-family)',
56
+ // large screen typography
57
+ 'l-display-md': 'var(--typography-l-display-md-font-family)',
58
+ 'l-heading-lg': 'var(--typography-l-heading-lg-font-family)',
59
+ 'l-heading-md': 'var(--typography-l-heading-md-font-family)',
60
+ 'l-heading-sm': 'var(--typography-l-heading-sm-font-family)',
61
+ 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-font-family)',
62
+ 'l-body-md-bold': 'var(--typography-l-body-md-bold-font-family)',
63
+ 'l-body-md-medium': 'var(--typography-l-body-md-medium-font-family)',
64
+ 'l-body-md': 'var(--typography-l-body-md-font-family)',
65
+ 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-font-family)',
66
+ 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-font-family)',
67
+ 'l-body-sm': 'var(--typography-l-body-sm-font-family)',
68
+ 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-font-family)',
69
+ 'l-body-xs': 'var(--typography-l-body-xs-font-family)',
70
+ },
71
+ letterSpacing: {
72
+ // small screen typography
73
+ 's-display-md': 'var(--typography-s-display-md-letter-spacing)',
74
+ 's-heading-lg': 'var(--typography-s-heading-lg-letter-spacing)',
75
+ 's-heading-md': 'var(--typography-s-heading-md-letter-spacing)',
76
+ 's-heading-sm': 'var(--typography-s-heading-sm-letter-spacing)',
77
+ 's-body-lg-medium': 'var(--typography-s-body-lg-medium-letter-spacing)',
78
+ 's-body-lg-regular': 'var(--typography-s-body-lg-regular-letter-spacing)',
79
+ 's-body-md-bold': 'var(--typography-s-body-md-bold-letter-spacing)',
80
+ 's-body-md-medium': 'var(--typography-s-body-md-medium-letter-spacing)',
81
+ 's-body-md': 'var(--typography-s-body-md-letter-spacing)',
82
+ 's-body-sm-bold': 'var(--typography-s-body-sm-bold-letter-spacing)',
83
+ 's-body-sm-medium': 'var(--typography-s-body-sm-medium-letter-spacing)',
84
+ 's-body-sm': 'var(--typography-s-body-sm-letter-spacing)',
85
+ 's-body-xs-medium': 'var(--typography-s-body-xs-medium-letter-spacing)',
86
+ 's-body-xs': 'var(--typography-s-body-xs-letter-spacing)',
87
+ // large screen typography
88
+ 'l-display-md': 'var(--typography-l-display-md-letter-spacing)',
89
+ 'l-heading-lg': 'var(--typography-l-heading-lg-letter-spacing)',
90
+ 'l-heading-md': 'var(--typography-l-heading-md-letter-spacing)',
91
+ 'l-heading-sm': 'var(--typography-l-heading-sm-letter-spacing)',
92
+ 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-letter-spacing)',
93
+ 'l-body-md-bold': 'var(--typography-l-body-md-bold-letter-spacing)',
94
+ 'l-body-md-medium': 'var(--typography-l-body-md-medium-letter-spacing)',
95
+ 'l-body-md': 'var(--typography-l-body-md-letter-spacing)',
96
+ 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-letter-spacing)',
97
+ 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-letter-spacing)',
98
+ 'l-body-sm': 'var(--typography-l-body-sm-letter-spacing)',
99
+ 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-letter-spacing)',
100
+ 'l-body-xs': 'var(--typography-l-body-xs-letter-spacing)',
101
+ },
102
+ fontWeight: {
103
+ // small screen typography
104
+ 's-display-md': 'var(--typography-s-display-md-font-weight)',
105
+ 's-heading-lg': 'var(--typography-s-heading-lg-font-weight)',
106
+ 's-heading-md': 'var(--typography-s-heading-md-font-weight)',
107
+ 's-heading-sm': 'var(--typography-s-heading-sm-font-weight)',
108
+ 's-body-lg-medium': 'var(--typography-s-body-lg-medium-font-weight)',
109
+ 's-body-lg-regular': 'var(--typography-s-body-lg-regular-font-weight)',
110
+ 's-body-md-bold': 'var(--typography-s-body-md-bold-font-weight)',
111
+ 's-body-md-medium': 'var(--typography-s-body-md-medium-font-weight)',
112
+ 's-body-md': 'var(--typography-s-body-md-font-weight)',
113
+ 's-body-sm-bold': 'var(--typography-s-body-sm-bold-font-weight)',
114
+ 's-body-sm-medium': 'var(--typography-s-body-sm-medium-font-weight)',
115
+ 's-body-sm': 'var(--typography-s-body-sm-font-weight)',
116
+ 's-body-xs-medium': 'var(--typography-s-body-xs-medium-font-weight)',
117
+ 's-body-xs': 'var(--typography-s-body-xs-font-weight)',
118
+ // large screen typography
119
+ 'l-display-md': 'var(--typography-l-display-md-font-weight)',
120
+ 'l-heading-lg': 'var(--typography-l-heading-lg-font-weight)',
121
+ 'l-heading-md': 'var(--typography-l-heading-md-font-weight)',
122
+ 'l-heading-sm': 'var(--typography-l-heading-sm-font-weight)',
123
+ 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-font-weight)',
124
+ 'l-body-md-bold': 'var(--typography-l-body-md-bold-font-weight)',
125
+ 'l-body-md-medium': 'var(--typography-l-body-md-medium-font-weight)',
126
+ 'l-body-md': 'var(--typography-l-body-md-font-weight)',
127
+ 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-font-weight)',
128
+ 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-font-weight)',
129
+ 'l-body-sm': 'var(--typography-l-body-sm-font-weight)',
130
+ 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-font-weight)',
131
+ 'l-body-xs': 'var(--typography-l-body-xs-font-weight)',
132
+ },
133
+ lineHeight: {
134
+ // small screen typography
135
+ 's-display-md': 'var(--typography-s-display-md-line-height)',
136
+ 's-heading-lg': 'var(--typography-s-heading-lg-line-height)',
137
+ 's-heading-md': 'var(--typography-s-heading-md-line-height)',
138
+ 's-heading-sm': 'var(--typography-s-heading-sm-line-height)',
139
+ 's-body-lg-medium': 'var(--typography-s-body-lg-medium-line-height)',
140
+ 's-body-lg-regular': 'var(--typography-s-body-lg-regular-line-height)',
141
+ 's-body-md-bold': 'var(--typography-s-body-md-bold-line-height)',
142
+ 's-body-md-medium': 'var(--typography-s-body-md-medium-line-height)',
143
+ 's-body-md': 'var(--typography-s-body-md-line-height)',
144
+ 's-body-sm-bold': 'var(--typography-s-body-sm-bold-line-height)',
145
+ 's-body-sm-medium': 'var(--typography-s-body-sm-medium-line-height)',
146
+ 's-body-sm': 'var(--typography-s-body-sm-line-height)',
147
+ 's-body-xs-medium': 'var(--typography-s-body-xs-medium-line-height)',
148
+ 's-body-xs': 'var(--typography-s-body-xs-line-height)',
149
+ // large screen typography
150
+ 'l-display-md': 'var(--typography-l-display-md-line-height)',
151
+ 'l-heading-lg': 'var(--typography-l-heading-lg-line-height)',
152
+ 'l-heading-md': 'var(--typography-l-heading-md-line-height)',
153
+ 'l-heading-sm': 'var(--typography-l-heading-sm-line-height)',
154
+ 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-line-height)',
155
+ 'l-body-md-bold': 'var(--typography-l-body-md-bold-line-height)',
156
+ 'l-body-md-medium': 'var(--typography-l-body-md-medium-line-height)',
157
+ 'l-body-md': 'var(--typography-l-body-md-line-height)',
158
+ 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-line-height)',
159
+ 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-line-height)',
160
+ 'l-body-sm': 'var(--typography-l-body-sm-line-height)',
161
+ 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-line-height)',
162
+ 'l-body-xs': 'var(--typography-l-body-xs-line-height)',
163
+ },
164
+ };
165
+ //# sourceMappingURL=typography.mjs.map
package/dist/typography.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"typography.mjs","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"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","sourcesContent":["export const typography = {\n fontSize: {\n // small screen typography\n 's-display-md': 'var(--typography-s-display-md-font-size)',\n 's-heading-lg': 'var(--typography-s-heading-lg-font-size)',\n 's-heading-md': 'var(--typography-s-heading-md-font-size)',\n 's-heading-sm': 'var(--typography-s-heading-sm-font-size)',\n 's-body-lg-medium': 'var(--typography-s-body-lg-medium-font-size)',\n 's-body-lg-regular': 'var(--typography-s-body-lg-regular-font-size)',\n 's-body-md-bold': 'var(--typography-s-body-md-bold-font-size)',\n 's-body-md-medium': 'var(--typography-s-body-md-medium-font-size)',\n 's-body-md': 'var(--typography-s-body-md-font-size)',\n 's-body-sm-bold': 'var(--typography-s-body-sm-bold-font-size)',\n 's-body-sm-medium': 'var(--typography-s-body-sm-medium-font-size)',\n 's-body-sm': 'var(--typography-s-body-sm-font-size)',\n 's-body-xs-medium': 'var(--typography-s-body-xs-medium-font-size)',\n 's-body-xs': 'var(--typography-s-body-xs-font-size)',\n // large screen typography\n 'l-display-md': 'var(--typography-l-display-md-font-size)',\n 'l-heading-lg': 'var(--typography-l-heading-lg-font-size)',\n 'l-heading-md': 'var(--typography-l-heading-md-font-size)',\n 'l-heading-sm': 'var(--typography-l-heading-sm-font-size)',\n 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-font-size)',\n 'l-body-md-bold': 'var(--typography-l-body-md-bold-font-size)',\n 'l-body-md-medium': 'var(--typography-l-body-md-medium-font-size)',\n 'l-body-md': 'var(--typography-l-body-md-font-size)',\n 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-font-size)',\n 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-font-size)',\n 'l-body-sm': 'var(--typography-l-body-sm-font-size)',\n 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-font-size)',\n 'l-body-xs': 'var(--typography-l-body-xs-font-size)',\n },\n fontFamily: {\n sans: [\n 'Euclid Circular B', // This should match @font-face set in tailwind.css\n 'Helvetica Neue',\n 'Helvetica',\n 'Arial',\n 'sans-serif',\n ],\n // small screen typography\n 's-display-md': 'var(--typography-s-display-md-font-family)',\n 's-heading-lg': 'var(--typography-s-heading-lg-font-family)',\n 's-heading-md': 'var(--typography-s-heading-md-font-family)',\n 's-heading-sm': 'var(--typography-s-heading-sm-font-family)',\n 's-body-lg-medium': 'var(--typography-s-body-lg-medium-font-family)',\n 's-body-lg-regular': 'var(--typography-s-body-lg-regular-font-family)',\n 's-body-md-bold': 'var(--typography-s-body-md-bold-font-family)',\n 's-body-md-medium': 'var(--typography-s-body-md-medium-font-family)',\n 's-body-md': 'var(--typography-s-body-md-font-family)',\n 's-body-sm-bold': 'var(--typography-s-body-sm-bold-font-family)',\n 's-body-sm-medium': 'var(--typography-s-body-sm-medium-font-family)',\n 's-body-sm': 'var(--typography-s-body-sm-font-family)',\n 's-body-xs-medium': 'var(--typography-s-body-xs-medium-font-family)',\n 's-body-xs': 'var(--typography-s-body-xs-font-family)',\n // large screen typography\n 'l-display-md': 'var(--typography-l-display-md-font-family)',\n 'l-heading-lg': 'var(--typography-l-heading-lg-font-family)',\n 'l-heading-md': 'var(--typography-l-heading-md-font-family)',\n 'l-heading-sm': 'var(--typography-l-heading-sm-font-family)',\n 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-font-family)',\n 'l-body-md-bold': 'var(--typography-l-body-md-bold-font-family)',\n 'l-body-md-medium': 'var(--typography-l-body-md-medium-font-family)',\n 'l-body-md': 'var(--typography-l-body-md-font-family)',\n 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-font-family)',\n 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-font-family)',\n 'l-body-sm': 'var(--typography-l-body-sm-font-family)',\n 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-font-family)',\n 'l-body-xs': 'var(--typography-l-body-xs-font-family)',\n },\n letterSpacing: {\n // small screen typography\n 's-display-md': 'var(--typography-s-display-md-letter-spacing)',\n 's-heading-lg': 'var(--typography-s-heading-lg-letter-spacing)',\n 's-heading-md': 'var(--typography-s-heading-md-letter-spacing)',\n 's-heading-sm': 'var(--typography-s-heading-sm-letter-spacing)',\n 's-body-lg-medium': 'var(--typography-s-body-lg-medium-letter-spacing)',\n 's-body-lg-regular': 'var(--typography-s-body-lg-regular-letter-spacing)',\n 's-body-md-bold': 'var(--typography-s-body-md-bold-letter-spacing)',\n 's-body-md-medium': 'var(--typography-s-body-md-medium-letter-spacing)',\n 's-body-md': 'var(--typography-s-body-md-letter-spacing)',\n 's-body-sm-bold': 'var(--typography-s-body-sm-bold-letter-spacing)',\n 's-body-sm-medium': 'var(--typography-s-body-sm-medium-letter-spacing)',\n 's-body-sm': 'var(--typography-s-body-sm-letter-spacing)',\n 's-body-xs-medium': 'var(--typography-s-body-xs-medium-letter-spacing)',\n 's-body-xs': 'var(--typography-s-body-xs-letter-spacing)',\n // large screen typography\n 'l-display-md': 'var(--typography-l-display-md-letter-spacing)',\n 'l-heading-lg': 'var(--typography-l-heading-lg-letter-spacing)',\n 'l-heading-md': 'var(--typography-l-heading-md-letter-spacing)',\n 'l-heading-sm': 'var(--typography-l-heading-sm-letter-spacing)',\n 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-letter-spacing)',\n 'l-body-md-bold': 'var(--typography-l-body-md-bold-letter-spacing)',\n 'l-body-md-medium': 'var(--typography-l-body-md-medium-letter-spacing)',\n 'l-body-md': 'var(--typography-l-body-md-letter-spacing)',\n 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-letter-spacing)',\n 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-letter-spacing)',\n 'l-body-sm': 'var(--typography-l-body-sm-letter-spacing)',\n 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-letter-spacing)',\n 'l-body-xs': 'var(--typography-l-body-xs-letter-spacing)',\n },\n fontWeight: {\n // small screen typography\n 's-display-md': 'var(--typography-s-display-md-font-weight)',\n 's-heading-lg': 'var(--typography-s-heading-lg-font-weight)',\n 's-heading-md': 'var(--typography-s-heading-md-font-weight)',\n 's-heading-sm': 'var(--typography-s-heading-sm-font-weight)',\n 's-body-lg-medium': 'var(--typography-s-body-lg-medium-font-weight)',\n 's-body-lg-regular': 'var(--typography-s-body-lg-regular-font-weight)',\n 's-body-md-bold': 'var(--typography-s-body-md-bold-font-weight)',\n 's-body-md-medium': 'var(--typography-s-body-md-medium-font-weight)',\n 's-body-md': 'var(--typography-s-body-md-font-weight)',\n 's-body-sm-bold': 'var(--typography-s-body-sm-bold-font-weight)',\n 's-body-sm-medium': 'var(--typography-s-body-sm-medium-font-weight)',\n 's-body-sm': 'var(--typography-s-body-sm-font-weight)',\n 's-body-xs-medium': 'var(--typography-s-body-xs-medium-font-weight)',\n 's-body-xs': 'var(--typography-s-body-xs-font-weight)',\n // large screen typography\n 'l-display-md': 'var(--typography-l-display-md-font-weight)',\n 'l-heading-lg': 'var(--typography-l-heading-lg-font-weight)',\n 'l-heading-md': 'var(--typography-l-heading-md-font-weight)',\n 'l-heading-sm': 'var(--typography-l-heading-sm-font-weight)',\n 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-font-weight)',\n 'l-body-md-bold': 'var(--typography-l-body-md-bold-font-weight)',\n 'l-body-md-medium': 'var(--typography-l-body-md-medium-font-weight)',\n 'l-body-md': 'var(--typography-l-body-md-font-weight)',\n 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-font-weight)',\n 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-font-weight)',\n 'l-body-sm': 'var(--typography-l-body-sm-font-weight)',\n 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-font-weight)',\n 'l-body-xs': 'var(--typography-l-body-xs-font-weight)',\n },\n lineHeight: {\n // small screen typography\n 's-display-md': 'var(--typography-s-display-md-line-height)',\n 's-heading-lg': 'var(--typography-s-heading-lg-line-height)',\n 's-heading-md': 'var(--typography-s-heading-md-line-height)',\n 's-heading-sm': 'var(--typography-s-heading-sm-line-height)',\n 's-body-lg-medium': 'var(--typography-s-body-lg-medium-line-height)',\n 's-body-lg-regular': 'var(--typography-s-body-lg-regular-line-height)',\n 's-body-md-bold': 'var(--typography-s-body-md-bold-line-height)',\n 's-body-md-medium': 'var(--typography-s-body-md-medium-line-height)',\n 's-body-md': 'var(--typography-s-body-md-line-height)',\n 's-body-sm-bold': 'var(--typography-s-body-sm-bold-line-height)',\n 's-body-sm-medium': 'var(--typography-s-body-sm-medium-line-height)',\n 's-body-sm': 'var(--typography-s-body-sm-line-height)',\n 's-body-xs-medium': 'var(--typography-s-body-xs-medium-line-height)',\n 's-body-xs': 'var(--typography-s-body-xs-line-height)',\n // large screen typography\n 'l-display-md': 'var(--typography-l-display-md-line-height)',\n 'l-heading-lg': 'var(--typography-l-heading-lg-line-height)',\n 'l-heading-md': 'var(--typography-l-heading-md-line-height)',\n 'l-heading-sm': 'var(--typography-l-heading-sm-line-height)',\n 'l-body-lg-medium': 'var(--typography-l-body-lg-medium-line-height)',\n 'l-body-md-bold': 'var(--typography-l-body-md-bold-line-height)',\n 'l-body-md-medium': 'var(--typography-l-body-md-medium-line-height)',\n 'l-body-md': 'var(--typography-l-body-md-line-height)',\n 'l-body-sm-bold': 'var(--typography-l-body-sm-bold-line-height)',\n 'l-body-sm-medium': 'var(--typography-l-body-sm-medium-line-height)',\n 'l-body-sm': 'var(--typography-l-body-sm-line-height)',\n 'l-body-xs-medium': 'var(--typography-l-body-xs-medium-line-height)',\n 'l-body-xs': 'var(--typography-l-body-xs-line-height)',\n },\n};\n"]}
package/package.json ADDED
@@ -0,0 +1,72 @@
1
+ {
2
+ "name": "@metamask-previews/design-system-tailwind-preset",
3
+ "version": "0.0.0-preview.52473ea",
4
+ "description": "Design System Tailwind CSS preset for MetaMask projects",
5
+ "keywords": [
6
+ "MetaMask",
7
+ "Ethereum"
8
+ ],
9
+ "homepage": "https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-tailwind-preset#readme",
10
+ "bugs": {
11
+ "url": "https://github.com/MetaMask/metamask-design-system/issues"
12
+ },
13
+ "repository": {
14
+ "type": "git",
15
+ "url": "https://github.com/MetaMask/metamask-design-system.git"
16
+ },
17
+ "license": "MIT",
18
+ "sideEffects": false,
19
+ "exports": {
20
+ ".": {
21
+ "import": {
22
+ "types": "./dist/index.d.mts",
23
+ "default": "./dist/index.mjs"
24
+ },
25
+ "require": {
26
+ "types": "./dist/index.d.cts",
27
+ "default": "./dist/index.cjs"
28
+ }
29
+ },
30
+ "./package.json": "./package.json"
31
+ },
32
+ "main": "./dist/index.cjs",
33
+ "types": "./dist/index.d.cts",
34
+ "files": [
35
+ "dist/"
36
+ ],
37
+ "scripts": {
38
+ "build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references",
39
+ "build:docs": "typedoc",
40
+ "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-tailwind-preset",
41
+ "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-tailwind-preset",
42
+ "publish:preview": "yarn npm publish --tag preview",
43
+ "since-latest-release": "../../scripts/since-latest-release.sh",
44
+ "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=jest-silent-reporter",
45
+ "test:clean": "NODE_OPTIONS=--experimental-vm-modules jest --clearCache",
46
+ "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
47
+ "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
48
+ },
49
+ "devDependencies": {
50
+ "@metamask/auto-changelog": "^3.4.4",
51
+ "@types/jest": "^27.4.1",
52
+ "@types/node": "^16.18.54",
53
+ "deepmerge": "^4.2.2",
54
+ "jest": "^27.5.1",
55
+ "postcss": "^8.4.47",
56
+ "ts-jest": "^27.1.4",
57
+ "typedoc": "^0.24.8",
58
+ "typedoc-plugin-missing-exports": "^2.0.0",
59
+ "typescript": "~5.2.2"
60
+ },
61
+ "peerDependencies": {
62
+ "@metamask/design-tokens": "^4.0.0",
63
+ "tailwindcss": "^3.0.0"
64
+ },
65
+ "engines": {
66
+ "node": "^18.18 || >=20"
67
+ },
68
+ "publishConfig": {
69
+ "access": "public",
70
+ "registry": "https://registry.npmjs.org/"
71
+ }
72
+ }