@muraldevkit/ds-foundation 2.18.0 → 2.19.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.
- package/README.md +10 -5
- package/dist/fonts.css +0 -1
- package/dist/fonts.min.css +2 -1
- package/dist/foundation.css +681 -504
- 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 +11 -10
- package/dist/tokens/border.json +0 -39
- package/dist/tokens/color.json +0 -387
- 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 -734
- 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,86 @@
|
|
|
1
|
+
{
|
|
2
|
+
"shadow": {
|
|
3
|
+
"01": {
|
|
4
|
+
"$type": "shadow",
|
|
5
|
+
"$value": [
|
|
6
|
+
{
|
|
7
|
+
"offsetX": "0",
|
|
8
|
+
"offsetY": "0",
|
|
9
|
+
"blur": "1px",
|
|
10
|
+
"spread": "0",
|
|
11
|
+
"color": "rgba(11, 41, 70, 0.32)"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"offsetX": "0",
|
|
15
|
+
"offsetY": "4px",
|
|
16
|
+
"blur": "4px",
|
|
17
|
+
"spread": "0",
|
|
18
|
+
"color": "rgba(42, 82, 121, 0.04)"
|
|
19
|
+
}
|
|
20
|
+
],
|
|
21
|
+
"$description": "Shadow token."
|
|
22
|
+
},
|
|
23
|
+
"02": {
|
|
24
|
+
"$type": "shadow",
|
|
25
|
+
"$value": [
|
|
26
|
+
{
|
|
27
|
+
"offsetX": "0",
|
|
28
|
+
"offsetY": "0",
|
|
29
|
+
"blur": "1px",
|
|
30
|
+
"spread": "0",
|
|
31
|
+
"color": "rgba(11, 41, 70, 0.32)"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
"offsetX": "0",
|
|
35
|
+
"offsetY": "6px",
|
|
36
|
+
"blur": "8px",
|
|
37
|
+
"spread": "0",
|
|
38
|
+
"color": "rgba(42, 82, 121, 0.04)"
|
|
39
|
+
}
|
|
40
|
+
],
|
|
41
|
+
"$description": "Shadow token."
|
|
42
|
+
},
|
|
43
|
+
"03": {
|
|
44
|
+
"$type": "shadow",
|
|
45
|
+
"$value": [
|
|
46
|
+
{
|
|
47
|
+
"offsetX": "0",
|
|
48
|
+
"offsetY": "0",
|
|
49
|
+
"blur": "1px",
|
|
50
|
+
"spread": "0",
|
|
51
|
+
"color": "rgba(11, 41, 70, 0.32)"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"offsetX": "0",
|
|
55
|
+
"offsetY": "24px",
|
|
56
|
+
"blur": "20px",
|
|
57
|
+
"spread": "0",
|
|
58
|
+
"color": "rgba(42, 82, 121, 0.08)"
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
|
+
"$description": "Shadow token."
|
|
62
|
+
},
|
|
63
|
+
"interactive-01": {
|
|
64
|
+
"$type": "shadow",
|
|
65
|
+
"$value": {
|
|
66
|
+
"offsetX": "0",
|
|
67
|
+
"offsetY": "4px",
|
|
68
|
+
"blur": "5px",
|
|
69
|
+
"spread": "0",
|
|
70
|
+
"color": "rgba(24, 36, 47, 0.08)"
|
|
71
|
+
},
|
|
72
|
+
"$description": "Shadow token."
|
|
73
|
+
},
|
|
74
|
+
"interactive-02": {
|
|
75
|
+
"$type": "shadow",
|
|
76
|
+
"$value": {
|
|
77
|
+
"offsetX": "0",
|
|
78
|
+
"offsetY": "12px",
|
|
79
|
+
"blur": "20px",
|
|
80
|
+
"spread": "0px",
|
|
81
|
+
"color": "rgba(27, 57, 75, 0.2)"
|
|
82
|
+
},
|
|
83
|
+
"$description": "Shadow token."
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"spacing": {
|
|
3
|
+
"01": {
|
|
4
|
+
"$value": "calc(2 / var(--mrl-baseline) * 1rem)",
|
|
5
|
+
"$description": "Spacing token."
|
|
6
|
+
},
|
|
7
|
+
"02": {
|
|
8
|
+
"$value": "calc(4 / var(--mrl-baseline) * 1rem)",
|
|
9
|
+
"$description": "Spacing token."
|
|
10
|
+
},
|
|
11
|
+
"03": {
|
|
12
|
+
"$value": "calc(8 / var(--mrl-baseline) * 1rem)",
|
|
13
|
+
"$description": "Spacing token."
|
|
14
|
+
},
|
|
15
|
+
"04": {
|
|
16
|
+
"$value": "calc(12 / var(--mrl-baseline) * 1rem)",
|
|
17
|
+
"$description": "Spacing token."
|
|
18
|
+
},
|
|
19
|
+
"05": {
|
|
20
|
+
"$value": "calc(16 / var(--mrl-baseline) * 1rem)",
|
|
21
|
+
"$description": "Spacing token."
|
|
22
|
+
},
|
|
23
|
+
"06": {
|
|
24
|
+
"$value": "calc(20 / var(--mrl-baseline) * 1rem)",
|
|
25
|
+
"$description": "Spacing token."
|
|
26
|
+
},
|
|
27
|
+
"07": {
|
|
28
|
+
"$value": "calc(24 / var(--mrl-baseline) * 1rem)",
|
|
29
|
+
"$description": "Spacing token."
|
|
30
|
+
},
|
|
31
|
+
"08": {
|
|
32
|
+
"$value": "calc(32 / var(--mrl-baseline) * 1rem)",
|
|
33
|
+
"$description": "Spacing token."
|
|
34
|
+
},
|
|
35
|
+
"09": {
|
|
36
|
+
"$value": "calc(40 / var(--mrl-baseline) * 1rem)",
|
|
37
|
+
"$description": "Spacing token."
|
|
38
|
+
},
|
|
39
|
+
"10": {
|
|
40
|
+
"$value": "calc(48 / var(--mrl-baseline) * 1rem)",
|
|
41
|
+
"$description": "Spacing token."
|
|
42
|
+
},
|
|
43
|
+
"11": {
|
|
44
|
+
"$value": "calc(64 / var(--mrl-baseline) * 1rem)",
|
|
45
|
+
"$description": "Spacing token."
|
|
46
|
+
},
|
|
47
|
+
"12": {
|
|
48
|
+
"$value": "calc(80 / var(--mrl-baseline) * 1rem)",
|
|
49
|
+
"$description": "Spacing token."
|
|
50
|
+
},
|
|
51
|
+
"13": {
|
|
52
|
+
"$value": "calc(96 / var(--mrl-baseline) * 1rem)",
|
|
53
|
+
"$description": "Spacing token."
|
|
54
|
+
},
|
|
55
|
+
"14": {
|
|
56
|
+
"$value": "calc(160 / var(--mrl-baseline) * 1rem)",
|
|
57
|
+
"$description": "Spacing token."
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
{
|
|
2
|
+
"baseline": {
|
|
3
|
+
"$value": 16,
|
|
4
|
+
"$type": "number",
|
|
5
|
+
"$description": "Root baseline used by other tokens to compute rem-based sizes via calc()."
|
|
6
|
+
},
|
|
7
|
+
"font-family": {
|
|
8
|
+
"01": {
|
|
9
|
+
"$value": "abcsocial",
|
|
10
|
+
"$type": "fontFamily",
|
|
11
|
+
"$description": "Font family token."
|
|
12
|
+
},
|
|
13
|
+
"02": {
|
|
14
|
+
"$value": "stkbureau",
|
|
15
|
+
"$type": "fontFamily",
|
|
16
|
+
"$description": "Font family token."
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"font-size": {
|
|
20
|
+
"10": {
|
|
21
|
+
"$value": "calc(48 / var(--mrl-baseline) * 1rem)",
|
|
22
|
+
"$description": "Font size token."
|
|
23
|
+
},
|
|
24
|
+
"11": {
|
|
25
|
+
"$value": "calc(64 / var(--mrl-baseline) * 1rem)",
|
|
26
|
+
"$description": "Font size token."
|
|
27
|
+
},
|
|
28
|
+
"12": {
|
|
29
|
+
"$value": "calc(80 / var(--mrl-baseline) * 1rem)",
|
|
30
|
+
"$description": "Font size token."
|
|
31
|
+
},
|
|
32
|
+
"13": {
|
|
33
|
+
"$value": "calc(96 / var(--mrl-baseline) * 1rem)",
|
|
34
|
+
"$description": "Font size token."
|
|
35
|
+
},
|
|
36
|
+
"14": {
|
|
37
|
+
"$value": "calc(120 / var(--mrl-baseline) * 1rem)",
|
|
38
|
+
"$description": "Font size token."
|
|
39
|
+
},
|
|
40
|
+
"01": {
|
|
41
|
+
"$value": "calc(11 / var(--mrl-baseline) * 1rem)",
|
|
42
|
+
"$description": "Font size token."
|
|
43
|
+
},
|
|
44
|
+
"02": {
|
|
45
|
+
"$value": "calc(12 / var(--mrl-baseline) * 1rem)",
|
|
46
|
+
"$description": "Font size token."
|
|
47
|
+
},
|
|
48
|
+
"03": {
|
|
49
|
+
"$value": "calc(14 / var(--mrl-baseline) * 1rem)",
|
|
50
|
+
"$description": "Font size token."
|
|
51
|
+
},
|
|
52
|
+
"04": {
|
|
53
|
+
"$value": "calc(16 / var(--mrl-baseline) * 1rem)",
|
|
54
|
+
"$description": "Font size token."
|
|
55
|
+
},
|
|
56
|
+
"05": {
|
|
57
|
+
"$value": "calc(18 / var(--mrl-baseline) * 1rem)",
|
|
58
|
+
"$description": "Font size token."
|
|
59
|
+
},
|
|
60
|
+
"06": {
|
|
61
|
+
"$value": "calc(20 / var(--mrl-baseline) * 1rem)",
|
|
62
|
+
"$description": "Font size token."
|
|
63
|
+
},
|
|
64
|
+
"07": {
|
|
65
|
+
"$value": "calc(24 / var(--mrl-baseline) * 1rem)",
|
|
66
|
+
"$description": "Font size token."
|
|
67
|
+
},
|
|
68
|
+
"08": {
|
|
69
|
+
"$value": "calc(32 / var(--mrl-baseline) * 1rem)",
|
|
70
|
+
"$description": "Font size token."
|
|
71
|
+
},
|
|
72
|
+
"09": {
|
|
73
|
+
"$value": "calc(40 / var(--mrl-baseline) * 1rem)",
|
|
74
|
+
"$description": "Font size token."
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"line-height": {
|
|
78
|
+
"10": {
|
|
79
|
+
"$value": 1.56,
|
|
80
|
+
"$type": "number",
|
|
81
|
+
"$description": "Line height token."
|
|
82
|
+
},
|
|
83
|
+
"11": {
|
|
84
|
+
"$value": 1.75,
|
|
85
|
+
"$type": "number",
|
|
86
|
+
"$description": "Line height token."
|
|
87
|
+
},
|
|
88
|
+
"12": {
|
|
89
|
+
"$value": 2,
|
|
90
|
+
"$type": "number",
|
|
91
|
+
"$description": "Line height token."
|
|
92
|
+
},
|
|
93
|
+
"01": {
|
|
94
|
+
"$value": 0.875,
|
|
95
|
+
"$type": "number",
|
|
96
|
+
"$description": "Line height token."
|
|
97
|
+
},
|
|
98
|
+
"02": {
|
|
99
|
+
"$value": 1,
|
|
100
|
+
"$type": "number",
|
|
101
|
+
"$description": "Line height token."
|
|
102
|
+
},
|
|
103
|
+
"03": {
|
|
104
|
+
"$value": 1.125,
|
|
105
|
+
"$type": "number",
|
|
106
|
+
"$description": "Line height token."
|
|
107
|
+
},
|
|
108
|
+
"04": {
|
|
109
|
+
"$value": 1.167,
|
|
110
|
+
"$type": "number",
|
|
111
|
+
"$description": "Line height token."
|
|
112
|
+
},
|
|
113
|
+
"05": {
|
|
114
|
+
"$value": 1.25,
|
|
115
|
+
"$type": "number",
|
|
116
|
+
"$description": "Line height token."
|
|
117
|
+
},
|
|
118
|
+
"06": {
|
|
119
|
+
"$value": 1.333,
|
|
120
|
+
"$type": "number",
|
|
121
|
+
"$description": "Line height token."
|
|
122
|
+
},
|
|
123
|
+
"07": {
|
|
124
|
+
"$value": 1.4,
|
|
125
|
+
"$type": "number",
|
|
126
|
+
"$description": "Line height token."
|
|
127
|
+
},
|
|
128
|
+
"08": {
|
|
129
|
+
"$value": 1.429,
|
|
130
|
+
"$type": "number",
|
|
131
|
+
"$description": "Line height token."
|
|
132
|
+
},
|
|
133
|
+
"09": {
|
|
134
|
+
"$value": 1.5,
|
|
135
|
+
"$type": "number",
|
|
136
|
+
"$description": "Line height token."
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
"letter-spacing": {
|
|
140
|
+
"01": {
|
|
141
|
+
"$value": {
|
|
142
|
+
"value": -2,
|
|
143
|
+
"unit": "%"
|
|
144
|
+
},
|
|
145
|
+
"$type": "dimension",
|
|
146
|
+
"$description": "Letter spacing token."
|
|
147
|
+
},
|
|
148
|
+
"02": {
|
|
149
|
+
"$value": {
|
|
150
|
+
"value": -1,
|
|
151
|
+
"unit": "%"
|
|
152
|
+
},
|
|
153
|
+
"$type": "dimension",
|
|
154
|
+
"$description": "Letter spacing token."
|
|
155
|
+
},
|
|
156
|
+
"03": {
|
|
157
|
+
"$value": {
|
|
158
|
+
"value": 0,
|
|
159
|
+
"unit": "%"
|
|
160
|
+
},
|
|
161
|
+
"$type": "dimension",
|
|
162
|
+
"$description": "Letter spacing token."
|
|
163
|
+
},
|
|
164
|
+
"04": {
|
|
165
|
+
"$value": {
|
|
166
|
+
"value": 1,
|
|
167
|
+
"unit": "%"
|
|
168
|
+
},
|
|
169
|
+
"$type": "dimension",
|
|
170
|
+
"$description": "Letter spacing token."
|
|
171
|
+
},
|
|
172
|
+
"05": {
|
|
173
|
+
"$value": {
|
|
174
|
+
"value": 2,
|
|
175
|
+
"unit": "%"
|
|
176
|
+
},
|
|
177
|
+
"$type": "dimension",
|
|
178
|
+
"$description": "Letter spacing token."
|
|
179
|
+
}
|
|
180
|
+
},
|
|
181
|
+
"font-weight": {
|
|
182
|
+
"01": {
|
|
183
|
+
"$value": 400,
|
|
184
|
+
"$type": "fontWeight",
|
|
185
|
+
"$description": "Font weight token."
|
|
186
|
+
},
|
|
187
|
+
"02": {
|
|
188
|
+
"$value": 500,
|
|
189
|
+
"$type": "fontWeight",
|
|
190
|
+
"$description": "Font weight token."
|
|
191
|
+
},
|
|
192
|
+
"03": {
|
|
193
|
+
"$value": 600,
|
|
194
|
+
"$type": "fontWeight",
|
|
195
|
+
"$description": "Font weight token."
|
|
196
|
+
},
|
|
197
|
+
"04": {
|
|
198
|
+
"$value": 700,
|
|
199
|
+
"$type": "fontWeight",
|
|
200
|
+
"$description": "Font weight token."
|
|
201
|
+
},
|
|
202
|
+
"05": {
|
|
203
|
+
"$value": 800,
|
|
204
|
+
"$type": "fontWeight",
|
|
205
|
+
"$description": "Font weight token."
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
package/package.json
CHANGED
|
@@ -1,23 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@muraldevkit/ds-foundation",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.19.0",
|
|
4
4
|
"description": "Mural's design system's Foundation package containing our design language features used across all components",
|
|
5
5
|
"license": "https://www.mural.co/terms/developer-addendum",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"build:minify": "npm run build:fonts:min && npm run build:foundation:min",
|
|
10
|
-
"build:transpile": "npm run build:fonts && npm run build:foundation",
|
|
11
|
-
"build:foundation": "sass src/styles/index.scss dist/foundation.css",
|
|
12
|
-
"build:foundation:min": "sass src/styles/index.scss dist/foundation.min.css --style compressed",
|
|
13
|
-
"build:fonts": "sass src/styles/fonts.scss dist/fonts.css",
|
|
14
|
-
"build:fonts:min": "sass src/styles/fonts.scss dist/fonts.min.css --style compressed",
|
|
15
|
-
"build:styles": "npm run build:transpile && npm run build:minify",
|
|
16
|
-
"build": "npm run clean && npm run build:styles",
|
|
17
|
-
"postbuild": "npm run copy",
|
|
18
|
-
"clean": "rimraf dist && rimraf src/styles/_global.scss",
|
|
7
|
+
"build": "node build.mjs",
|
|
8
|
+
"clean": "rimraf dist src/styles/_tokens.scss",
|
|
19
9
|
"lint": "stylelint 'src/styles/**/*.scss'",
|
|
20
|
-
"watch": "sass src/styles/index.scss dist/foundation.css --watch",
|
|
21
10
|
"release": "npx semantic-release",
|
|
22
11
|
"lint-staged": "npx lint-staged --concurrent false"
|
|
23
12
|
},
|
|
@@ -30,11 +19,12 @@
|
|
|
30
19
|
"access": "public"
|
|
31
20
|
},
|
|
32
21
|
"devDependencies": {
|
|
33
|
-
"
|
|
22
|
+
"prettier": "3.6.2",
|
|
34
23
|
"rimraf": "6.1.0",
|
|
35
24
|
"sass": "1.62.1",
|
|
36
25
|
"semantic-release": "22.0.12",
|
|
37
26
|
"semantic-release-monorepo": "8.0.2",
|
|
27
|
+
"style-dictionary": "5.4.1",
|
|
38
28
|
"stylelint": "16.10.0",
|
|
39
29
|
"stylelint-config-standard": "36.0.1",
|
|
40
30
|
"stylelint-config-standard-scss": "13.1.0",
|