@muraldevkit/ds-foundation 2.17.0 → 2.19.0-dev-rMoq.1
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.
- package/README.md +10 -5
- package/dist/fonts.css +0 -1
- package/dist/fonts.min.css +2 -1
- package/dist/foundation.css +681 -514
- package/dist/foundation.css.map +1 -1
- package/dist/foundation.min.css +2 -1
- package/dist/foundation.min.css.map +1 -1
- package/dist/tokens/contextual-variables/border.json +134 -0
- package/dist/tokens/contextual-variables/color.json +352 -0
- package/dist/tokens/contextual-variables/shadows.json +30 -0
- package/dist/tokens/contextual-variables/spacing.json +120 -0
- package/dist/tokens/contextual-variables/typography.json +232 -0
- package/dist/tokens/global-variables/border.json +61 -0
- package/dist/tokens/global-variables/color.json +636 -0
- package/dist/tokens/global-variables/motion.json +63 -0
- package/dist/tokens/global-variables/shadows.json +86 -0
- package/dist/tokens/global-variables/spacing.json +60 -0
- package/dist/tokens/global-variables/typography.json +208 -0
- package/package.json +5 -15
- package/src/styles/_tokens.scss +781 -0
- package/src/styles/contextual-variables/index.scss +0 -3
- package/src/styles/contextual-variables/spacing.scss +8 -169
- package/src/styles/contextual-variables/typography.scss +9 -374
- package/src/styles/index.scss +10 -10
- package/dist/tokens/border.json +0 -39
- package/dist/tokens/color.json +0 -419
- package/dist/tokens/motion.json +0 -41
- package/dist/tokens/shadows.json +0 -21
- package/dist/tokens/spacing.json +0 -46
- package/dist/tokens/typography.json +0 -152
- package/src/styles/contextual-variables/border.scss +0 -200
- package/src/styles/contextual-variables/color.scss +0 -519
- package/src/styles/contextual-variables/shadows.scss +0 -44
- package/src/styles/global-variables/border.scss +0 -65
- package/src/styles/global-variables/color.scss +0 -784
- package/src/styles/global-variables/index.scss +0 -7
- package/src/styles/global-variables/motion.scss +0 -65
- package/src/styles/global-variables/shadows.scss +0 -39
- package/src/styles/global-variables/spacing.scss +0 -79
- package/src/styles/global-variables/typography.scss +0 -203
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Contextual Typography Tokens. We have 6 different use cases for text: display, headlines, titles, body copy (text), and interactive UI elements. For each category, the default is the medium, [primary] variation. For use cases that have differences between mobile and desktop (display, and headline), we implement mobile as the default since our implementation follows a mobile-first philosophy for performance.",
|
|
3
|
+
"body-font": {
|
|
4
|
+
"$value": "{font-family.01}, sans-serif"
|
|
5
|
+
},
|
|
6
|
+
"heading-font": {
|
|
7
|
+
"$value": "{font-family.01}, sans-serif"
|
|
8
|
+
},
|
|
9
|
+
"heading-font-alt": {
|
|
10
|
+
"$value": "{font-family.02}, serif"
|
|
11
|
+
},
|
|
12
|
+
"type-size": {
|
|
13
|
+
"$description": "Typography - Font Size",
|
|
14
|
+
"display": {
|
|
15
|
+
"$value": "{font-size.08}",
|
|
16
|
+
"$description": "Contextual typography token."
|
|
17
|
+
},
|
|
18
|
+
"display-large": {
|
|
19
|
+
"$value": "{font-size.09}",
|
|
20
|
+
"$description": "Contextual typography token."
|
|
21
|
+
},
|
|
22
|
+
"display-small": {
|
|
23
|
+
"$value": "{font-size.07}",
|
|
24
|
+
"$description": "Contextual typography token."
|
|
25
|
+
},
|
|
26
|
+
"display-xsmall": {
|
|
27
|
+
"$value": "{font-size.06}",
|
|
28
|
+
"$description": "Contextual typography token."
|
|
29
|
+
},
|
|
30
|
+
"headline": {
|
|
31
|
+
"$value": "{font-size.06}",
|
|
32
|
+
"$description": "Contextual typography token."
|
|
33
|
+
},
|
|
34
|
+
"headline-large": {
|
|
35
|
+
"$value": "{font-size.06}",
|
|
36
|
+
"$description": "Contextual typography token."
|
|
37
|
+
},
|
|
38
|
+
"headline-small": {
|
|
39
|
+
"$value": "{font-size.04}",
|
|
40
|
+
"$description": "Contextual typography token."
|
|
41
|
+
},
|
|
42
|
+
"text": {
|
|
43
|
+
"$value": "{font-size.04}",
|
|
44
|
+
"$description": "Contextual typography token."
|
|
45
|
+
},
|
|
46
|
+
"text-large": {
|
|
47
|
+
"$value": "{font-size.05}",
|
|
48
|
+
"$description": "Contextual typography token."
|
|
49
|
+
},
|
|
50
|
+
"text-small": {
|
|
51
|
+
"$value": "{font-size.03}",
|
|
52
|
+
"$description": "Contextual typography token."
|
|
53
|
+
},
|
|
54
|
+
"text-xsmall": {
|
|
55
|
+
"$value": "{font-size.02}",
|
|
56
|
+
"$description": "Contextual typography token."
|
|
57
|
+
},
|
|
58
|
+
"text-xxsmall": {
|
|
59
|
+
"$value": "{font-size.01}",
|
|
60
|
+
"$description": "Contextual typography token."
|
|
61
|
+
},
|
|
62
|
+
"toggleable-label": {
|
|
63
|
+
"$value": "calc(10 / var(--mrl-baseline) * 1rem)",
|
|
64
|
+
"$description": "Toggleable label mixin variable. Exceptional value: this mixin renders a 10px font, which we have no variable for."
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"type-line-height": {
|
|
68
|
+
"$description": "Typography - Line Height",
|
|
69
|
+
"title": {
|
|
70
|
+
"$value": "{line-height.05}",
|
|
71
|
+
"$description": "Contextual typography token."
|
|
72
|
+
},
|
|
73
|
+
"title-large": {
|
|
74
|
+
"$value": "{line-height.06}",
|
|
75
|
+
"$description": "Contextual typography token."
|
|
76
|
+
},
|
|
77
|
+
"title-small": {
|
|
78
|
+
"$value": "{line-height.08}",
|
|
79
|
+
"$description": "Contextual typography token."
|
|
80
|
+
},
|
|
81
|
+
"title-xsmall": {
|
|
82
|
+
"$value": "{line-height.06}",
|
|
83
|
+
"$description": "Contextual typography token."
|
|
84
|
+
},
|
|
85
|
+
"title-xxsmall": {
|
|
86
|
+
"$value": "{line-height.06}",
|
|
87
|
+
"$description": "Contextual typography token."
|
|
88
|
+
},
|
|
89
|
+
"display": {
|
|
90
|
+
"$value": "{line-height.02}",
|
|
91
|
+
"$description": "Contextual typography token."
|
|
92
|
+
},
|
|
93
|
+
"display-large": {
|
|
94
|
+
"$value": "{line-height.02}",
|
|
95
|
+
"$description": "Contextual typography token."
|
|
96
|
+
},
|
|
97
|
+
"display-small": {
|
|
98
|
+
"$value": "{line-height.02}",
|
|
99
|
+
"$description": "Contextual typography token."
|
|
100
|
+
},
|
|
101
|
+
"display-xsmall": {
|
|
102
|
+
"$value": "{line-height.02}",
|
|
103
|
+
"$description": "Contextual typography token."
|
|
104
|
+
},
|
|
105
|
+
"headline": {
|
|
106
|
+
"$value": "{line-height.07}",
|
|
107
|
+
"$description": "Contextual typography token."
|
|
108
|
+
},
|
|
109
|
+
"headline-large": {
|
|
110
|
+
"$value": "{line-height.07}",
|
|
111
|
+
"$description": "Contextual typography token."
|
|
112
|
+
},
|
|
113
|
+
"headline-small": {
|
|
114
|
+
"$value": "{line-height.02}",
|
|
115
|
+
"$description": "Contextual typography token."
|
|
116
|
+
},
|
|
117
|
+
"text": {
|
|
118
|
+
"$value": "{line-height.09}",
|
|
119
|
+
"$description": "Contextual typography token."
|
|
120
|
+
},
|
|
121
|
+
"text-large": {
|
|
122
|
+
"$value": "{line-height.10}",
|
|
123
|
+
"$description": "Contextual typography token."
|
|
124
|
+
},
|
|
125
|
+
"text-small": {
|
|
126
|
+
"$value": "{line-height.08}",
|
|
127
|
+
"$description": "Contextual typography token."
|
|
128
|
+
},
|
|
129
|
+
"text-xsmall": {
|
|
130
|
+
"$value": "{line-height.06}",
|
|
131
|
+
"$description": "Contextual typography token."
|
|
132
|
+
},
|
|
133
|
+
"text-xxsmall": {
|
|
134
|
+
"$value": "{line-height.08}",
|
|
135
|
+
"$description": "Contextual typography token."
|
|
136
|
+
},
|
|
137
|
+
"interactive": {
|
|
138
|
+
"$value": "{line-height.09}",
|
|
139
|
+
"$description": "Contextual typography token."
|
|
140
|
+
},
|
|
141
|
+
"interactive-large": {
|
|
142
|
+
"$value": "{line-height.10}",
|
|
143
|
+
"$description": "Contextual typography token."
|
|
144
|
+
},
|
|
145
|
+
"interactive-small": {
|
|
146
|
+
"$value": "{line-height.08}",
|
|
147
|
+
"$description": "Contextual typography token."
|
|
148
|
+
},
|
|
149
|
+
"interactive-xsmall": {
|
|
150
|
+
"$value": "{line-height.06}",
|
|
151
|
+
"$description": "Contextual typography token."
|
|
152
|
+
}
|
|
153
|
+
},
|
|
154
|
+
"type-weight": {
|
|
155
|
+
"$description": "Typography - Font Weight",
|
|
156
|
+
"display": {
|
|
157
|
+
"$value": "{font-weight.01}",
|
|
158
|
+
"$description": "Contextual typography token."
|
|
159
|
+
},
|
|
160
|
+
"headline": {
|
|
161
|
+
"$value": "{font-weight.04}",
|
|
162
|
+
"$description": "Contextual typography token."
|
|
163
|
+
},
|
|
164
|
+
"title": {
|
|
165
|
+
"$value": "{font-weight.04}",
|
|
166
|
+
"$description": "Contextual typography token."
|
|
167
|
+
},
|
|
168
|
+
"title-secondary": {
|
|
169
|
+
"$value": "{font-weight.02}",
|
|
170
|
+
"$description": "Contextual typography token."
|
|
171
|
+
},
|
|
172
|
+
"text": {
|
|
173
|
+
"$value": "{font-weight.01}",
|
|
174
|
+
"$description": "Contextual typography token."
|
|
175
|
+
},
|
|
176
|
+
"text-bold": {
|
|
177
|
+
"$value": "{font-weight.04}",
|
|
178
|
+
"$description": "Contextual typography token."
|
|
179
|
+
},
|
|
180
|
+
"text-secondary": {
|
|
181
|
+
"$value": "{font-weight.01}",
|
|
182
|
+
"$description": "Contextual typography token."
|
|
183
|
+
},
|
|
184
|
+
"interactive": {
|
|
185
|
+
"$value": "{font-weight.04}",
|
|
186
|
+
"$description": "Contextual typography token."
|
|
187
|
+
},
|
|
188
|
+
"toggleable-label": {
|
|
189
|
+
"$value": "{font-weight.03}",
|
|
190
|
+
"$description": "Toggleable label mixin variable."
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
"type-spacing": {
|
|
194
|
+
"$description": "Typography - Letter Spacing",
|
|
195
|
+
"display": {
|
|
196
|
+
"$value": "{letter-spacing.03}",
|
|
197
|
+
"$description": "Contextual typography token."
|
|
198
|
+
},
|
|
199
|
+
"display-large": {
|
|
200
|
+
"$value": "{letter-spacing.02}",
|
|
201
|
+
"$description": "Contextual typography token."
|
|
202
|
+
},
|
|
203
|
+
"display-small": {
|
|
204
|
+
"$value": "{letter-spacing.02}",
|
|
205
|
+
"$description": "Contextual typography token."
|
|
206
|
+
},
|
|
207
|
+
"display-xsmall": {
|
|
208
|
+
"$value": "{letter-spacing.02}",
|
|
209
|
+
"$description": "Contextual typography token."
|
|
210
|
+
},
|
|
211
|
+
"headline": {
|
|
212
|
+
"$value": "{letter-spacing.03}",
|
|
213
|
+
"$description": "Contextual typography token."
|
|
214
|
+
},
|
|
215
|
+
"headline-large": {
|
|
216
|
+
"$value": "{letter-spacing.03}",
|
|
217
|
+
"$description": "Contextual typography token."
|
|
218
|
+
},
|
|
219
|
+
"headline-small": {
|
|
220
|
+
"$value": "{letter-spacing.04}",
|
|
221
|
+
"$description": "Contextual typography token."
|
|
222
|
+
},
|
|
223
|
+
"text": {
|
|
224
|
+
"$value": "{letter-spacing.03}",
|
|
225
|
+
"$description": "Contextual typography token."
|
|
226
|
+
},
|
|
227
|
+
"interactive-xsmall": {
|
|
228
|
+
"$value": "{letter-spacing.04}",
|
|
229
|
+
"$description": "Contextual typography token."
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
{
|
|
2
|
+
"radii": {
|
|
3
|
+
"01": {
|
|
4
|
+
"$value": { "value": 2, "unit": "px" },
|
|
5
|
+
"$type": "dimension",
|
|
6
|
+
"$description": "Border radius token."
|
|
7
|
+
},
|
|
8
|
+
"02": {
|
|
9
|
+
"$value": { "value": 4, "unit": "px" },
|
|
10
|
+
"$type": "dimension",
|
|
11
|
+
"$description": "Border radius token."
|
|
12
|
+
},
|
|
13
|
+
"03": {
|
|
14
|
+
"$value": { "value": 8, "unit": "px" },
|
|
15
|
+
"$type": "dimension",
|
|
16
|
+
"$description": "Border radius token."
|
|
17
|
+
},
|
|
18
|
+
"04": {
|
|
19
|
+
"$value": { "value": 12, "unit": "px" },
|
|
20
|
+
"$type": "dimension",
|
|
21
|
+
"$description": "Border radius token."
|
|
22
|
+
},
|
|
23
|
+
"05": {
|
|
24
|
+
"$value": { "value": 16, "unit": "px" },
|
|
25
|
+
"$type": "dimension",
|
|
26
|
+
"$description": "Border radius token."
|
|
27
|
+
},
|
|
28
|
+
"06": {
|
|
29
|
+
"$value": { "value": 24, "unit": "px" },
|
|
30
|
+
"$type": "dimension",
|
|
31
|
+
"$description": "Border radius token."
|
|
32
|
+
},
|
|
33
|
+
"07": {
|
|
34
|
+
"$value": { "value": 32, "unit": "px" },
|
|
35
|
+
"$type": "dimension",
|
|
36
|
+
"$description": "Border radius token."
|
|
37
|
+
},
|
|
38
|
+
"08": {
|
|
39
|
+
"$value": { "value": 40, "unit": "px" },
|
|
40
|
+
"$type": "dimension",
|
|
41
|
+
"$description": "Border radius token."
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"stroke": {
|
|
45
|
+
"01": {
|
|
46
|
+
"$value": { "value": 2, "unit": "px" },
|
|
47
|
+
"$type": "dimension",
|
|
48
|
+
"$description": "Border width token."
|
|
49
|
+
},
|
|
50
|
+
"02": {
|
|
51
|
+
"$value": { "value": 2, "unit": "px" },
|
|
52
|
+
"$type": "dimension",
|
|
53
|
+
"$description": "Border width token."
|
|
54
|
+
},
|
|
55
|
+
"03": {
|
|
56
|
+
"$value": { "value": 2, "unit": "px" },
|
|
57
|
+
"$type": "dimension",
|
|
58
|
+
"$description": "Border width token."
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|