WB-1655: Add mediaQuery breakpoints to wonder-blocks-tokens

.changeset/few-paws-speak.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Add mediaQuery tokens for viewport sizing

__docs__/wonder-blocks-tokens/__overview__.mdx

@@ -25,6 +25,7 @@ These represent the design decisions at Khan Academy, such as:
 -   <a href="/?path=/docs/packages-tokens-color--docs">Color Primitives</a>
 -   <a href="/?path=/docs/packages-tokens-spacing--docs">Spacing</a>
 -   <a href="/?path=/docs/packages-tokens-typography--docs">Typography</a>
+-   <a href="/?path=/docs/packages-tokens-media-queries--docs">Media Queries</a>
 
 ## Usage
 

__docs__/wonder-blocks-tokens/tokens-media-queries.mdx

@@ -0,0 +1,49 @@
+import {Meta, Source} from "@storybook/blocks";
+
+import TokenTable from "../../.storybook/components/token-table";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
+
+import ComponentInfo from "../../.storybook/components/component-info";
+import packageConfig from "../../packages/wonder-blocks-tokens/package.json";
+
+<Meta title="Packages / Tokens / Media Queries" />
+
+# Media Queries
+
+<ComponentInfo name={packageConfig.name} version={packageConfig.version} />
+
+All the available media query breakpoint values that can be used for min-width,
+max-width, width, etc.
+
+## Usage
+
+You can use these values directly by importing `mediaQueries` from the
+`wonder-blocks-tokens` package and accessing the named property like so:
+`mediaQueries.sm`.
+
+```js
+import {mediaQueries} from "@khanacademy/wonder-blocks-tokens";
+const styles = {
+    [mediaQueries.sm]: {
+        flexDirection: "column"
+    }
+};
+```
+
+## Tokens
+
+<TokenTable
+    columns={[
+        {
+            label: "Token",
+            cell: (row) => <code>mediaQueries.{row.label}</code>,
+        },
+        {
+            label: "Value",
+            cell: "value",
+        },
+    ]}
+    tokens={tokens.mediaQueries}
+/>

packages/wonder-blocks-tokens/src/index.ts

@@ -7,6 +7,9 @@ import {spacing} from "./tokens/spacing";
 // semantic tokens
 import {semanticColor} from "./tokens/semantic-color";
 
+// media queries
+import {mediaQueries} from "./tokens/media-queries";
+
 // utils
 import {mix, fade} from "./util/utils";
 
@@ -18,6 +21,10 @@ export {
     color,
     font,
     spacing,
+    /**
+     * Media query breakpoints.
+     */
+    mediaQueries,
     /**
      * Semantic tokens.
      */

packages/wonder-blocks-tokens/src/tokens/media-queries.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 const pureXsMax = "567px";
+export const pureSmMin = "568px";
+export const pureSmMax = "681px";
+export const pureMdMin = "682px";
+export const pureMdMax = "1023px";
+export const pureLgMin = "1024px";
+
+export const mediaQueries = {
+    // Named
+    xs: `@media screen and (max-width: ${pureXsMax})`,
+    sm: `@media screen and (min-width: ${pureSmMin}) and (max-width: ${pureSmMax})`,
+    md: `@media screen and (min-width: ${pureMdMin}) and (max-width: ${pureMdMax})`,
+    lg: `@media screen and (min-width: ${pureMdMin}) and (max-width: ${pureLgMin})`,
+    xl: `@media screen and (min-width: ${pureLgMin})`,
+
+    xsOrSmaller: `@media screen and (max-width: ${pureXsMax})`,
+    smOrSmaller: `@media screen and (max-width: ${pureSmMax})`,
+    mdOrSmaller: `@media screen and (max-width: ${pureMdMax})`,
+    lgOrSmaller: `@media screen and (max-width: ${pureLgMin})`,
+
+    smOrLarger: `@media screen and (min-width: ${pureSmMin})`,
+    mdOrLarger: `@media screen and (min-width: ${pureMdMin})`,
+    lgOrLarger: `@media screen and (min-width: ${pureLgMin})`,
+} as const;

types/aphrodite.d.ts

@@ -1,5 +1,6 @@
 declare module "aphrodite" {
     import * as React from "react";
+    import {mediaQueries} from "../../packages/wonder-blocks-tokens";
 
     type _CSSProperties = React.CSSProperties & {
         /**
@@ -17,6 +18,18 @@
         "@media (max-width: 1023px)"?: React.CSSProperties;
         "@media (min-width: 1024px)"?: React.CSSProperties;
         "@media (min-width: 1168px)"?: React.CSSProperties;
+        [mediaQueries.xs]?: React.CSSProperties;
+        [mediaQueries.sm]?: React.CSSProperties;
+        [mediaQueries.md]?: React.CSSProperties;
+        [mediaQueries.lg]?: React.CSSProperties;
+        [mediaQueries.xl]?: React.CSSProperties;
+        [mediaQueries.xsOrSmaller]?: React.CSSProperties;
+        [mediaQueries.smOrSmaller]?: React.CSSProperties;
+        [mediaQueries.mdOrSmaller]?: React.CSSProperties;
+        [mediaQueries.lgOrSmaller]?: React.CSSProperties;
+        [mediaQueries.smOrLarger]?: React.CSSProperties;
+        [mediaQueries.mdOrLarger]?: React.CSSProperties;
+        [mediaQueries.lgOrLarger]?: React.CSSProperties;
     };
 
     /**