@ndla/preset-panda 0.0.19 → 0.0.21
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/dist/styles.css +10 -2
- package/es/globalCss.js +0 -1
- package/es/semanticTokens.js +26 -2
- package/lib/globalCss.js +0 -1
- package/lib/semanticTokens.d.ts +24 -0
- package/lib/semanticTokens.js +26 -2
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -433,17 +433,19 @@
|
|
|
433
433
|
--breakpoints-desktop: 61.3125em;
|
|
434
434
|
--breakpoints-wide: 81.3125em;
|
|
435
435
|
--breakpoints-ultra-wide: 100.0625em;
|
|
436
|
+
--spacing-5xsmall: var(--spacing-1);
|
|
436
437
|
--spacing-4xsmall: var(--spacing-2);
|
|
437
438
|
--spacing-3xsmall: var(--spacing-3);
|
|
438
439
|
--spacing-xxsmall: var(--spacing-4);
|
|
439
440
|
--spacing-xsmall: var(--spacing-6);
|
|
440
441
|
--spacing-small: var(--spacing-8);
|
|
441
442
|
--spacing-medium: var(--spacing-12);
|
|
442
|
-
--spacing-large: var(--spacing-
|
|
443
|
+
--spacing-large: var(--spacing-16);
|
|
443
444
|
--spacing-xlarge: var(--spacing-18);
|
|
444
445
|
--spacing-xxlarge: var(--spacing-24);
|
|
445
446
|
--spacing-3xlarge: var(--spacing-36);
|
|
446
447
|
--spacing-4xlarge: var(--spacing-48);
|
|
448
|
+
--spacing-5xlarge: var(--spacing-60);
|
|
447
449
|
--spacing-surface-4xsmall: var(--spacing-50);
|
|
448
450
|
--spacing-surface-3xsmall: var(--spacing-75);
|
|
449
451
|
--spacing-surface-xxsmall: var(--spacing-100);
|
|
@@ -455,17 +457,19 @@
|
|
|
455
457
|
--spacing-surface-xxlarge: var(--spacing-400);
|
|
456
458
|
--spacing-surface-3xlarge: var(--spacing-500);
|
|
457
459
|
--spacing-surface-4xlarge: var(--spacing-550);
|
|
460
|
+
--sizes-5xsmall: var(--spacing-1);
|
|
458
461
|
--sizes-4xsmall: var(--spacing-2);
|
|
459
462
|
--sizes-3xsmall: var(--spacing-3);
|
|
460
463
|
--sizes-xxsmall: var(--spacing-4);
|
|
461
464
|
--sizes-xsmall: var(--spacing-6);
|
|
462
465
|
--sizes-small: var(--spacing-8);
|
|
463
466
|
--sizes-medium: var(--spacing-12);
|
|
464
|
-
--sizes-large: var(--spacing-
|
|
467
|
+
--sizes-large: var(--spacing-16);
|
|
465
468
|
--sizes-xlarge: var(--spacing-18);
|
|
466
469
|
--sizes-xxlarge: var(--spacing-24);
|
|
467
470
|
--sizes-3xlarge: var(--spacing-36);
|
|
468
471
|
--sizes-4xlarge: var(--spacing-48);
|
|
472
|
+
--sizes-5xlarge: var(--spacing-60);
|
|
469
473
|
--sizes-surface-4xsmall: var(--spacing-50);
|
|
470
474
|
--sizes-surface-3xsmall: var(--spacing-75);
|
|
471
475
|
--sizes-surface-xxsmall: var(--spacing-100);
|
|
@@ -477,6 +481,9 @@
|
|
|
477
481
|
--sizes-surface-xxlarge: var(--spacing-400);
|
|
478
482
|
--sizes-surface-3xlarge: var(--spacing-500);
|
|
479
483
|
--sizes-surface-4xlarge: var(--spacing-550);
|
|
484
|
+
--sizes-surface-page-max: 1128px;
|
|
485
|
+
--sizes-surface-content-max: 744px;
|
|
486
|
+
--sizes-surface-article-max: 928px;
|
|
480
487
|
--colors-background-default: var(--colors-white);
|
|
481
488
|
--colors-background-subtle: var(--colors-grey-100);
|
|
482
489
|
--colors-background-strong: var(--colors-purple-50);
|
|
@@ -498,6 +505,7 @@
|
|
|
498
505
|
--colors-surface-brand-2: var(--colors-blue-500);
|
|
499
506
|
--colors-surface-brand-2-subtle: var(--colors-blue-50);
|
|
500
507
|
--colors-surface-brand-2-moderate: var(--colors-blue-100);
|
|
508
|
+
--colors-surface-brand-2-bold: var(--colors-blue-800);
|
|
501
509
|
--colors-surface-brand-2-strong: var(--colors-blue-900);
|
|
502
510
|
--colors-surface-brand-3: var(--colors-green-500);
|
|
503
511
|
--colors-surface-brand-3-subtle: var(--colors-green-100);
|
package/es/globalCss.js
CHANGED
|
@@ -63,7 +63,6 @@ export const globalCss = defineGlobalStyles({
|
|
|
63
63
|
},
|
|
64
64
|
// Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
|
|
65
65
|
'& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"], [data-embed-type="uu-disclaimer"], details, blockquote': {
|
|
66
|
-
// TODO: Remove copy-heading if we can merge the new heading links
|
|
67
66
|
'& > :is(h2, [data-embed-type="copy-heading"])': {
|
|
68
67
|
marginBlockStart: "xxlarge",
|
|
69
68
|
marginBlockEnd: "medium"
|
package/es/semanticTokens.js
CHANGED
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
import { defineSemanticTokens } from "@pandacss/dev";
|
|
10
10
|
export const semanticTokens = defineSemanticTokens({
|
|
11
11
|
spacing: {
|
|
12
|
+
"5xsmall": {
|
|
13
|
+
value: "{spacing.1}"
|
|
14
|
+
},
|
|
12
15
|
"4xsmall": {
|
|
13
16
|
value: "{spacing.2}"
|
|
14
17
|
},
|
|
@@ -28,7 +31,7 @@ export const semanticTokens = defineSemanticTokens({
|
|
|
28
31
|
value: "{spacing.12}"
|
|
29
32
|
},
|
|
30
33
|
large: {
|
|
31
|
-
value: "{spacing.
|
|
34
|
+
value: "{spacing.16}"
|
|
32
35
|
},
|
|
33
36
|
xlarge: {
|
|
34
37
|
value: "{spacing.18}"
|
|
@@ -42,6 +45,9 @@ export const semanticTokens = defineSemanticTokens({
|
|
|
42
45
|
"4xlarge": {
|
|
43
46
|
value: "{spacing.48}"
|
|
44
47
|
},
|
|
48
|
+
"5xlarge": {
|
|
49
|
+
value: "{spacing.60}"
|
|
50
|
+
},
|
|
45
51
|
surface: {
|
|
46
52
|
"4xsmall": {
|
|
47
53
|
value: "{spacing.50}"
|
|
@@ -79,6 +85,9 @@ export const semanticTokens = defineSemanticTokens({
|
|
|
79
85
|
}
|
|
80
86
|
},
|
|
81
87
|
sizes: {
|
|
88
|
+
"5xsmall": {
|
|
89
|
+
value: "{spacing.1}"
|
|
90
|
+
},
|
|
82
91
|
"4xsmall": {
|
|
83
92
|
value: "{spacing.2}"
|
|
84
93
|
},
|
|
@@ -98,7 +107,7 @@ export const semanticTokens = defineSemanticTokens({
|
|
|
98
107
|
value: "{spacing.12}"
|
|
99
108
|
},
|
|
100
109
|
large: {
|
|
101
|
-
value: "{spacing.
|
|
110
|
+
value: "{spacing.16}"
|
|
102
111
|
},
|
|
103
112
|
xlarge: {
|
|
104
113
|
value: "{spacing.18}"
|
|
@@ -112,6 +121,9 @@ export const semanticTokens = defineSemanticTokens({
|
|
|
112
121
|
"4xlarge": {
|
|
113
122
|
value: "{spacing.48}"
|
|
114
123
|
},
|
|
124
|
+
"5xlarge": {
|
|
125
|
+
value: "{spacing.60}"
|
|
126
|
+
},
|
|
115
127
|
surface: {
|
|
116
128
|
"4xsmall": {
|
|
117
129
|
value: "{spacing.50}"
|
|
@@ -145,6 +157,15 @@ export const semanticTokens = defineSemanticTokens({
|
|
|
145
157
|
},
|
|
146
158
|
"4xlarge": {
|
|
147
159
|
value: "{spacing.550}"
|
|
160
|
+
},
|
|
161
|
+
pageMax: {
|
|
162
|
+
value: "1128px"
|
|
163
|
+
},
|
|
164
|
+
contentMax: {
|
|
165
|
+
value: "744px"
|
|
166
|
+
},
|
|
167
|
+
articleMax: {
|
|
168
|
+
value: "928px"
|
|
148
169
|
}
|
|
149
170
|
}
|
|
150
171
|
},
|
|
@@ -223,6 +244,9 @@ export const semanticTokens = defineSemanticTokens({
|
|
|
223
244
|
moderate: {
|
|
224
245
|
value: "{colors.blue.100}"
|
|
225
246
|
},
|
|
247
|
+
bold: {
|
|
248
|
+
value: "{colors.blue.800}"
|
|
249
|
+
},
|
|
226
250
|
strong: {
|
|
227
251
|
value: "{colors.blue.900}"
|
|
228
252
|
}
|
package/lib/globalCss.js
CHANGED
|
@@ -69,7 +69,6 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
|
|
|
69
69
|
},
|
|
70
70
|
// Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
|
|
71
71
|
'& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"], [data-embed-type="uu-disclaimer"], details, blockquote': {
|
|
72
|
-
// TODO: Remove copy-heading if we can merge the new heading links
|
|
73
72
|
'& > :is(h2, [data-embed-type="copy-heading"])': {
|
|
74
73
|
marginBlockStart: "xxlarge",
|
|
75
74
|
marginBlockEnd: "medium"
|
package/lib/semanticTokens.d.ts
CHANGED
|
@@ -7,6 +7,9 @@
|
|
|
7
7
|
*/
|
|
8
8
|
export declare const semanticTokens: {
|
|
9
9
|
spacing: {
|
|
10
|
+
"5xsmall": {
|
|
11
|
+
value: string;
|
|
12
|
+
};
|
|
10
13
|
"4xsmall": {
|
|
11
14
|
value: string;
|
|
12
15
|
};
|
|
@@ -40,6 +43,9 @@ export declare const semanticTokens: {
|
|
|
40
43
|
"4xlarge": {
|
|
41
44
|
value: string;
|
|
42
45
|
};
|
|
46
|
+
"5xlarge": {
|
|
47
|
+
value: string;
|
|
48
|
+
};
|
|
43
49
|
surface: {
|
|
44
50
|
"4xsmall": {
|
|
45
51
|
value: string;
|
|
@@ -77,6 +83,9 @@ export declare const semanticTokens: {
|
|
|
77
83
|
};
|
|
78
84
|
};
|
|
79
85
|
sizes: {
|
|
86
|
+
"5xsmall": {
|
|
87
|
+
value: string;
|
|
88
|
+
};
|
|
80
89
|
"4xsmall": {
|
|
81
90
|
value: string;
|
|
82
91
|
};
|
|
@@ -110,6 +119,9 @@ export declare const semanticTokens: {
|
|
|
110
119
|
"4xlarge": {
|
|
111
120
|
value: string;
|
|
112
121
|
};
|
|
122
|
+
"5xlarge": {
|
|
123
|
+
value: string;
|
|
124
|
+
};
|
|
113
125
|
surface: {
|
|
114
126
|
"4xsmall": {
|
|
115
127
|
value: string;
|
|
@@ -144,6 +156,15 @@ export declare const semanticTokens: {
|
|
|
144
156
|
"4xlarge": {
|
|
145
157
|
value: string;
|
|
146
158
|
};
|
|
159
|
+
pageMax: {
|
|
160
|
+
value: string;
|
|
161
|
+
};
|
|
162
|
+
contentMax: {
|
|
163
|
+
value: string;
|
|
164
|
+
};
|
|
165
|
+
articleMax: {
|
|
166
|
+
value: string;
|
|
167
|
+
};
|
|
147
168
|
};
|
|
148
169
|
};
|
|
149
170
|
colors: {
|
|
@@ -221,6 +242,9 @@ export declare const semanticTokens: {
|
|
|
221
242
|
moderate: {
|
|
222
243
|
value: string;
|
|
223
244
|
};
|
|
245
|
+
bold: {
|
|
246
|
+
value: string;
|
|
247
|
+
};
|
|
224
248
|
strong: {
|
|
225
249
|
value: string;
|
|
226
250
|
};
|
package/lib/semanticTokens.js
CHANGED
|
@@ -15,6 +15,9 @@ var _dev = require("@pandacss/dev");
|
|
|
15
15
|
|
|
16
16
|
const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
|
|
17
17
|
spacing: {
|
|
18
|
+
"5xsmall": {
|
|
19
|
+
value: "{spacing.1}"
|
|
20
|
+
},
|
|
18
21
|
"4xsmall": {
|
|
19
22
|
value: "{spacing.2}"
|
|
20
23
|
},
|
|
@@ -34,7 +37,7 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
|
|
|
34
37
|
value: "{spacing.12}"
|
|
35
38
|
},
|
|
36
39
|
large: {
|
|
37
|
-
value: "{spacing.
|
|
40
|
+
value: "{spacing.16}"
|
|
38
41
|
},
|
|
39
42
|
xlarge: {
|
|
40
43
|
value: "{spacing.18}"
|
|
@@ -48,6 +51,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
|
|
|
48
51
|
"4xlarge": {
|
|
49
52
|
value: "{spacing.48}"
|
|
50
53
|
},
|
|
54
|
+
"5xlarge": {
|
|
55
|
+
value: "{spacing.60}"
|
|
56
|
+
},
|
|
51
57
|
surface: {
|
|
52
58
|
"4xsmall": {
|
|
53
59
|
value: "{spacing.50}"
|
|
@@ -85,6 +91,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
|
|
|
85
91
|
}
|
|
86
92
|
},
|
|
87
93
|
sizes: {
|
|
94
|
+
"5xsmall": {
|
|
95
|
+
value: "{spacing.1}"
|
|
96
|
+
},
|
|
88
97
|
"4xsmall": {
|
|
89
98
|
value: "{spacing.2}"
|
|
90
99
|
},
|
|
@@ -104,7 +113,7 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
|
|
|
104
113
|
value: "{spacing.12}"
|
|
105
114
|
},
|
|
106
115
|
large: {
|
|
107
|
-
value: "{spacing.
|
|
116
|
+
value: "{spacing.16}"
|
|
108
117
|
},
|
|
109
118
|
xlarge: {
|
|
110
119
|
value: "{spacing.18}"
|
|
@@ -118,6 +127,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
|
|
|
118
127
|
"4xlarge": {
|
|
119
128
|
value: "{spacing.48}"
|
|
120
129
|
},
|
|
130
|
+
"5xlarge": {
|
|
131
|
+
value: "{spacing.60}"
|
|
132
|
+
},
|
|
121
133
|
surface: {
|
|
122
134
|
"4xsmall": {
|
|
123
135
|
value: "{spacing.50}"
|
|
@@ -151,6 +163,15 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
|
|
|
151
163
|
},
|
|
152
164
|
"4xlarge": {
|
|
153
165
|
value: "{spacing.550}"
|
|
166
|
+
},
|
|
167
|
+
pageMax: {
|
|
168
|
+
value: "1128px"
|
|
169
|
+
},
|
|
170
|
+
contentMax: {
|
|
171
|
+
value: "744px"
|
|
172
|
+
},
|
|
173
|
+
articleMax: {
|
|
174
|
+
value: "928px"
|
|
154
175
|
}
|
|
155
176
|
}
|
|
156
177
|
},
|
|
@@ -229,6 +250,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
|
|
|
229
250
|
moderate: {
|
|
230
251
|
value: "{colors.blue.100}"
|
|
231
252
|
},
|
|
253
|
+
bold: {
|
|
254
|
+
value: "{colors.blue.800}"
|
|
255
|
+
},
|
|
232
256
|
strong: {
|
|
233
257
|
value: "{colors.blue.900}"
|
|
234
258
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/preset-panda",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.21",
|
|
4
4
|
"description": "Panda preset for NDLA.",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"publishConfig": {
|
|
38
38
|
"access": "public"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "b37f00c4b3c340890aa9729d74439fa84e2d2eed"
|
|
41
41
|
}
|