@khanacademy/wonder-blocks-tokens 2.0.1 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-tokens
 
+## 2.1.0
+
+### Minor Changes
+
+-   6999fd39: Add mediaQuery tokens for viewport sizing
+
 ## 2.0.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -197,6 +197,33 @@ const spacing = {
   xxxLarge_64: 64
 };
 
+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 = {
   action: {
     primary: {
@@ -269,4 +296,4 @@ const semanticColor = {
   }
 };
 
-export { border, color, fade, font, mix, semanticColor, spacing };
+export { border, breakpoint, color, fade, font, mix, semanticColor, spacing };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { border } from "./tokens/border";
 import { color } from "./tokens/color";
 import { font } from "./tokens/font";
 import { spacing } from "./tokens/spacing";
+import { breakpoint } from "./tokens/media-queries";
 import { semanticColor } from "./tokens/semantic-color";
 import { mix, fade } from "./util/utils";
 export { 
@@ -9,6 +10,10 @@ export {
  * Primitive tokens for the Wonder Blocks design system.
  */
 border, color, font, spacing, 
+/**
+ * Media query breakpoints.
+ */
+breakpoint, 
 /**
  * Semantic tokens.
  */

package/dist/index.js

@@ -201,6 +201,33 @@ const spacing = {
   xxxLarge_64: 64
 };
 
+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 = {
   action: {
     primary: {
@@ -274,6 +301,7 @@ const semanticColor = {
 };
 
 exports.border = border;
+exports.breakpoint = breakpoint;
 exports.color = color;
 exports.fade = fade;
 exports.font = font;

package/dist/tokens/media-queries.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A default set of media queries to use for different screen sizes.
+ *
+ * Breakpoint documentation: https://khanacademy.atlassian.net/wiki/spaces/WB/pages/2099970518/Layout+Breakpoints
+ *
+ */
+export declare const breakpoint: {
+    width: {
+        readonly xsMax: 567;
+        readonly smMin: 568;
+        readonly smMax: 681;
+        readonly mdMin: 682;
+        readonly mdMax: 1023;
+        readonly lgMin: 1024;
+    };
+    mediaQuery: {
+        readonly xs: "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xs */";
+        readonly sm: "@media screen and (min-width: 568px) and (max-width: 681px) /* breakpoint.mediaQuery.sm */";
+        readonly md: "@media screen and (min-width: 682px) and (max-width: 1023px) /* breakpoint.mediaQuery.md */";
+        readonly lg: "@media screen and (min-width: 682px) and (max-width: 1024px) /* breakpoint.mediaQuery.lg */";
+        readonly xl: "@media screen and (min-width: 1024px) /* breakpoint.mediaQuery.xl */";
+        readonly xsOrSmaller: "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xsOrSmaller */";
+        readonly smOrSmaller: "@media screen and (max-width: 681px) /* breakpoint.mediaQuery.smOrSmaller */";
+        readonly mdOrSmaller: "@media screen and (max-width: 1023px) /* breakpoint.mediaQuery.mdOrSmaller */";
+        readonly lgOrSmaller: "@media screen and (max-width: 1024px) /* breakpoint.mediaQuery.lgOrSmaller */";
+        readonly smOrLarger: "@media screen and (min-width: 568px) /* breakpoint.mediaQuery.smOrLarger */";
+        readonly mdOrLarger: "@media screen and (min-width: 682px) /* breakpoint.mediaQuery.mdOrLarger */";
+        readonly lgOrLarger: "@media screen and (min-width: 1024px) /* breakpoint.mediaQuery.lgOrLarger */";
+    };
+};

package/package.json

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