@khanacademy/wonder-blocks-tokens 17.0.0 → 17.1.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/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +6 -0
- package/dist/es/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/tokens/media-queries.d.ts +6 -3
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-tokens@17.
|
|
2
|
+
> @khanacademy/wonder-blocks-tokens@17.1.0 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens
|
|
3
3
|
> node -r @swc-node/register ./src/build/generate-css-variables.ts
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-tokens/dist/css
|
package/CHANGELOG.md
CHANGED
package/dist/es/index.js
CHANGED
|
@@ -4,7 +4,7 @@ const offBlack="#21242c";const white$1="#ffffff";const eggplant="#5f1e5c";const
|
|
|
4
4
|
|
|
5
5
|
const spacing={xxxxSmall_2:2,xxxSmall_4:4,xxSmall_6:6,xSmall_8:8,small_12:12,medium_16:16,large_24:24,xLarge_32:32,xxLarge_48:48,xxxLarge_64:64};
|
|
6
6
|
|
|
7
|
-
const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024};const mediaQuery={xs:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xs */`,sm:`@media screen and (min-width: ${width.smMin}px) and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.sm */`,md:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.md */`,lg:`@media screen and (min-width: ${width.
|
|
7
|
+
const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024,lgMax:1199,xlMin:1200};const mediaQuery={xs:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xs */`,sm:`@media screen and (min-width: ${width.smMin}px) and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.sm */`,md:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.md */`,lg:`@media screen and (min-width: ${width.lgMin}px) and (max-width: ${width.lgMax}px) /* breakpoint.mediaQuery.lg */`,xl:`@media screen and (min-width: ${width.xlMin}px) /* breakpoint.mediaQuery.xl */`,xsOrSmaller:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xsOrSmaller */`,smOrSmaller:`@media screen and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.smOrSmaller */`,mdOrSmaller:`@media screen and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.mdOrSmaller */`,lgOrSmaller:`@media screen and (max-width: ${width.lgMax}px) /* breakpoint.mediaQuery.lgOrSmaller */`,smOrLarger:`@media screen and (min-width: ${width.smMin}px) /* breakpoint.mediaQuery.smOrLarger */`,mdOrLarger:`@media screen and (min-width: ${width.mdMin}px) /* breakpoint.mediaQuery.mdOrLarger */`,lgOrLarger:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrLarger */`,xlOrLarger:`@media screen and (min-width: ${width.xlMin}px) /* breakpoint.mediaQuery.xlOrLarger */`};const breakpoint={width,mediaQuery};
|
|
8
8
|
|
|
9
9
|
const BASELINE_VALUE=10;function remToPx(value,baseline=BASELINE_VALUE){const num=parseFloat(value);const result=Math.round(num*baseline);return `${result}px`}function pxToRem(value,baseline=BASELINE_VALUE){return `${value/baseline}rem`}
|
|
10
10
|
|
package/dist/index.js
CHANGED
|
@@ -8,7 +8,7 @@ const offBlack="#21242c";const white$1="#ffffff";const eggplant="#5f1e5c";const
|
|
|
8
8
|
|
|
9
9
|
const spacing={xxxxSmall_2:2,xxxSmall_4:4,xxSmall_6:6,xSmall_8:8,small_12:12,medium_16:16,large_24:24,xLarge_32:32,xxLarge_48:48,xxxLarge_64:64};
|
|
10
10
|
|
|
11
|
-
const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024};const mediaQuery={xs:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xs */`,sm:`@media screen and (min-width: ${width.smMin}px) and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.sm */`,md:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.md */`,lg:`@media screen and (min-width: ${width.
|
|
11
|
+
const width={xsMax:567,smMin:568,smMax:681,mdMin:682,mdMax:1023,lgMin:1024,lgMax:1199,xlMin:1200};const mediaQuery={xs:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xs */`,sm:`@media screen and (min-width: ${width.smMin}px) and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.sm */`,md:`@media screen and (min-width: ${width.mdMin}px) and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.md */`,lg:`@media screen and (min-width: ${width.lgMin}px) and (max-width: ${width.lgMax}px) /* breakpoint.mediaQuery.lg */`,xl:`@media screen and (min-width: ${width.xlMin}px) /* breakpoint.mediaQuery.xl */`,xsOrSmaller:`@media screen and (max-width: ${width.xsMax}px) /* breakpoint.mediaQuery.xsOrSmaller */`,smOrSmaller:`@media screen and (max-width: ${width.smMax}px) /* breakpoint.mediaQuery.smOrSmaller */`,mdOrSmaller:`@media screen and (max-width: ${width.mdMax}px) /* breakpoint.mediaQuery.mdOrSmaller */`,lgOrSmaller:`@media screen and (max-width: ${width.lgMax}px) /* breakpoint.mediaQuery.lgOrSmaller */`,smOrLarger:`@media screen and (min-width: ${width.smMin}px) /* breakpoint.mediaQuery.smOrLarger */`,mdOrLarger:`@media screen and (min-width: ${width.mdMin}px) /* breakpoint.mediaQuery.mdOrLarger */`,lgOrLarger:`@media screen and (min-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lgOrLarger */`,xlOrLarger:`@media screen and (min-width: ${width.xlMin}px) /* breakpoint.mediaQuery.xlOrLarger */`};const breakpoint={width,mediaQuery};
|
|
12
12
|
|
|
13
13
|
const BASELINE_VALUE=10;function remToPx(value,baseline=BASELINE_VALUE){const num=parseFloat(value);const result=Math.round(num*baseline);return `${result}px`}function pxToRem(value,baseline=BASELINE_VALUE){return `${value/baseline}rem`}
|
|
14
14
|
|
|
@@ -12,19 +12,22 @@ export declare const breakpoint: {
|
|
|
12
12
|
readonly mdMin: 682;
|
|
13
13
|
readonly mdMax: 1023;
|
|
14
14
|
readonly lgMin: 1024;
|
|
15
|
+
readonly lgMax: 1199;
|
|
16
|
+
readonly xlMin: 1200;
|
|
15
17
|
};
|
|
16
18
|
mediaQuery: {
|
|
17
19
|
readonly xs: "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xs */";
|
|
18
20
|
readonly sm: "@media screen and (min-width: 568px) and (max-width: 681px) /* breakpoint.mediaQuery.sm */";
|
|
19
21
|
readonly md: "@media screen and (min-width: 682px) and (max-width: 1023px) /* breakpoint.mediaQuery.md */";
|
|
20
|
-
readonly lg: "@media screen and (min-width:
|
|
21
|
-
readonly xl: "@media screen and (min-width:
|
|
22
|
+
readonly lg: "@media screen and (min-width: 1024px) and (max-width: 1199px) /* breakpoint.mediaQuery.lg */";
|
|
23
|
+
readonly xl: "@media screen and (min-width: 1200px) /* breakpoint.mediaQuery.xl */";
|
|
22
24
|
readonly xsOrSmaller: "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xsOrSmaller */";
|
|
23
25
|
readonly smOrSmaller: "@media screen and (max-width: 681px) /* breakpoint.mediaQuery.smOrSmaller */";
|
|
24
26
|
readonly mdOrSmaller: "@media screen and (max-width: 1023px) /* breakpoint.mediaQuery.mdOrSmaller */";
|
|
25
|
-
readonly lgOrSmaller: "@media screen and (max-width:
|
|
27
|
+
readonly lgOrSmaller: "@media screen and (max-width: 1199px) /* breakpoint.mediaQuery.lgOrSmaller */";
|
|
26
28
|
readonly smOrLarger: "@media screen and (min-width: 568px) /* breakpoint.mediaQuery.smOrLarger */";
|
|
27
29
|
readonly mdOrLarger: "@media screen and (min-width: 682px) /* breakpoint.mediaQuery.mdOrLarger */";
|
|
28
30
|
readonly lgOrLarger: "@media screen and (min-width: 1024px) /* breakpoint.mediaQuery.lgOrLarger */";
|
|
31
|
+
readonly xlOrLarger: "@media screen and (min-width: 1200px) /* breakpoint.mediaQuery.xlOrLarger */";
|
|
29
32
|
};
|
|
30
33
|
};
|