@khanacademy/wonder-blocks-tokens - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-tokens
 
+## 2.1.0
+
+### Minor Changes
+
+-   6999fd39: Add mediaQuery tokens for viewport sizing
+
 ## 2.0.1
@@ -4,0 +10,0 @@

dist/es/index.js

@@ -200,2 +200,29 @@ const border = {
 
+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.mdMin}px) and (max-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lg */`,
+  xl: `@media screen and (min-width: ${width.lgMin}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.lgMin}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 */`
+};
+const breakpoint = {
+  width,
+  mediaQuery
+};
+
 const semanticColor = {
@@ -273,2 +300,2 @@ action: {
 
-export { border, color, fade, font, mix, semanticColor, spacing };
+export { border, breakpoint, color, fade, font, mix, semanticColor, spacing };

dist/index.d.ts

@@ -5,2 +5,3 @@ import { border } from "./tokens/border";
 import { spacing } from "./tokens/spacing";
+import { breakpoint } from "./tokens/media-queries";
 import { semanticColor } from "./tokens/semantic-color";
@@ -14,2 +15,6 @@ import { mix, fade } from "./util/utils";
 /**
+ * Media query breakpoints.
+ */
+breakpoint, 
+/**
  * Semantic tokens.
@@ -16,0 +21,0 @@ */

dist/index.js

@@ -204,2 +204,29 @@ 'use strict';
 
+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.mdMin}px) and (max-width: ${width.lgMin}px) /* breakpoint.mediaQuery.lg */`,
+  xl: `@media screen and (min-width: ${width.lgMin}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.lgMin}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 */`
+};
+const breakpoint = {
+  width,
+  mediaQuery
+};
+
 const semanticColor = {
@@ -278,2 +305,3 @@ action: {
 exports.border = border;
+exports.breakpoint = breakpoint;
 exports.color = color;
@@ -280,0 +308,0 @@ exports.fade = fade;

package.json

 {
   "name": "@khanacademy/wonder-blocks-tokens",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Core primitive design tokens for Web Wonder Blocks",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26718

increased by22.41%

Number of package files

12

increased by9.09%

Lines of code

860

increased by11.4%

No dependency changes