From d12df6e73471a79f9a11ad4e6e5e23e0985e0144 Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Thu, 17 Oct 2024 13:27:59 -0700
Subject: [PATCH 01/13] Add breakpoint tokens for mediaQueries

---
 .changeset/few-paws-speak.md                  |  5 ++
 .../wonder-blocks-tokens/__overview__.mdx     |  1 +
 .../tokens-media-queries.mdx                  | 49 +++++++++++++++++++
 packages/wonder-blocks-tokens/src/index.ts    |  7 +++
 .../src/tokens/mediaQueries.ts                | 31 ++++++++++++
 5 files changed, 93 insertions(+)
 create mode 100644 .changeset/few-paws-speak.md
 create mode 100644 __docs__/wonder-blocks-tokens/tokens-media-queries.mdx
 create mode 100644 packages/wonder-blocks-tokens/src/tokens/mediaQueries.ts

diff --git a/.changeset/few-paws-speak.md b/.changeset/few-paws-speak.md
new file mode 100644
index 000000000..59a3decb6
--- /dev/null
+++ b/.changeset/few-paws-speak.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-tokens": minor
+---
+
+Add mediaQuery tokens for viewport sizing
diff --git a/__docs__/wonder-blocks-tokens/__overview__.mdx b/__docs__/wonder-blocks-tokens/__overview__.mdx
index 4c1d99355..e663a7d7c 100644
--- a/__docs__/wonder-blocks-tokens/__overview__.mdx
+++ b/__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
 
diff --git a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
new file mode 100644
index 000000000..4389a5c08
--- /dev/null
+++ b/__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 `media-queries` from the
+`wonder-blocks-tokens` package and accessing the named property like so:
+`mediaQueries.sm`.
+
+```js
+import {spacing} 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}
+/>
diff --git a/packages/wonder-blocks-tokens/src/index.ts b/packages/wonder-blocks-tokens/src/index.ts
index 9349e53c9..43c82279f 100644
--- a/packages/wonder-blocks-tokens/src/index.ts
+++ b/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/mediaQueries";
+
 // utils
 import {mix, fade} from "./util/utils";
 
@@ -18,6 +21,10 @@ export {
     color,
     font,
     spacing,
+    /**
+     * Media query breakpoints.
+     */
+    mediaQueries,
     /**
      * Semantic tokens.
      */
diff --git a/packages/wonder-blocks-tokens/src/tokens/mediaQueries.ts b/packages/wonder-blocks-tokens/src/tokens/mediaQueries.ts
new file mode 100644
index 000000000..e15d44657
--- /dev/null
+++ b/packages/wonder-blocks-tokens/src/tokens/mediaQueries.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;

From 584e44a9c1f97d92cc9b8d820998208db48d065c Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Fri, 18 Oct 2024 15:45:09 -0700
Subject: [PATCH 02/13] Add initial type def for mediaQueries

---
 types/aphrodite.d.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/types/aphrodite.d.ts b/types/aphrodite.d.ts
index 19c3abf98..8283b256f 100644
--- a/types/aphrodite.d.ts
+++ b/types/aphrodite.d.ts
@@ -1,5 +1,6 @@
 declare module "aphrodite" {
     import * as React from "react";
+    import {mediaQueries} from "@khanacademy/wonder-blocks-tokens";
 
     type _CSSProperties = React.CSSProperties & {
         /**
@@ -17,6 +18,18 @@ declare module "aphrodite" {
         "@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;
     };
 
     /**

From d39c33445f9bfec88a8c9b66ec8e58cb4e0e5b76 Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Fri, 18 Oct 2024 15:48:06 -0700
Subject: [PATCH 03/13] Make corrections in docs

---
 __docs__/wonder-blocks-tokens/tokens-media-queries.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
index 4389a5c08..a60c813c7 100644
--- a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
+++ b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
@@ -19,12 +19,12 @@ max-width, width, etc.
 
 ## Usage
 
-You can use these values directly by importing `media-queries` from the
+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 {spacing} from "@khanacademy/wonder-blocks-tokens";
+import {mediaQueries} from "@khanacademy/wonder-blocks-tokens";
 const styles = {
     [mediaQueries.sm]: {
         flexDirection: "column"

From 6213ecb0347afc97828aca1c6e15e8658d8ebe0f Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Mon, 21 Oct 2024 09:50:25 -0700
Subject: [PATCH 04/13] Follow file naming convention

---
 packages/wonder-blocks-tokens/src/index.ts                      | 2 +-
 .../src/tokens/{mediaQueries.ts => media-queries.ts}            | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/wonder-blocks-tokens/src/tokens/{mediaQueries.ts => media-queries.ts} (100%)

diff --git a/packages/wonder-blocks-tokens/src/index.ts b/packages/wonder-blocks-tokens/src/index.ts
index 43c82279f..bdd3c9423 100644
--- a/packages/wonder-blocks-tokens/src/index.ts
+++ b/packages/wonder-blocks-tokens/src/index.ts
@@ -8,7 +8,7 @@ import {spacing} from "./tokens/spacing";
 import {semanticColor} from "./tokens/semantic-color";
 
 // media queries
-import {mediaQueries} from "./tokens/mediaQueries";
+import {mediaQueries} from "./tokens/media-queries";
 
 // utils
 import {mix, fade} from "./util/utils";
diff --git a/packages/wonder-blocks-tokens/src/tokens/mediaQueries.ts b/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
similarity index 100%
rename from packages/wonder-blocks-tokens/src/tokens/mediaQueries.ts
rename to packages/wonder-blocks-tokens/src/tokens/media-queries.ts

From 1d65d0a97f55f2df3327595470ed17f0807c89af Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Mon, 21 Oct 2024 11:00:16 -0700
Subject: [PATCH 05/13] Use relative import for type def

---
 types/aphrodite.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/aphrodite.d.ts b/types/aphrodite.d.ts
index 8283b256f..3c226e3de 100644
--- a/types/aphrodite.d.ts
+++ b/types/aphrodite.d.ts
@@ -1,6 +1,6 @@
 declare module "aphrodite" {
     import * as React from "react";
-    import {mediaQueries} from "@khanacademy/wonder-blocks-tokens";
+    import {mediaQueries} from "../../packages/wonder-blocks-tokens";
 
     type _CSSProperties = React.CSSProperties & {
         /**

From ab7e9df431daaeeeb92ca7d407d3245702a0c2f5 Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Tue, 29 Oct 2024 14:50:50 -0700
Subject: [PATCH 06/13] Export breakpoints, pureWidths

---
 .../tokens-media-queries.mdx                  | 14 +++---
 packages/wonder-blocks-tokens/src/index.ts    |  8 +--
 .../src/tokens/media-queries.ts               | 40 ++++++++-------
 types/aphrodite.d.ts                          | 49 ++++++++++++++-----
 4 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
index a60c813c7..4b9ed5318 100644
--- a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
+++ b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
@@ -8,7 +8,7 @@ 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" />
+<Meta title="Packages / Tokens / Media Query Breakpoints" />
 
 # Media Queries
 
@@ -19,14 +19,14 @@ max-width, width, etc.
 
 ## Usage
 
-You can use these values directly by importing `mediaQueries` from the
+You can use these values directly by importing `breakpoints` from the
 `wonder-blocks-tokens` package and accessing the named property like so:
-`mediaQueries.sm`.
+`breakpoints.sm`.
 
 ```js
-import {mediaQueries} from "@khanacademy/wonder-blocks-tokens";
+import {breakpoints} from "@khanacademy/wonder-blocks-tokens";
 const styles = {
-    [mediaQueries.sm]: {
+    [breakpoints.sm]: {
         flexDirection: "column"
     }
 };
@@ -38,12 +38,12 @@ const styles = {
     columns={[
         {
             label: "Token",
-            cell: (row) => <code>mediaQueries.{row.label}</code>,
+            cell: (row) => <code>breakpoints.{row.label}</code>,
         },
         {
             label: "Value",
             cell: "value",
         },
     ]}
-    tokens={tokens.mediaQueries}
+    tokens={tokens.breakpoints}
 />
diff --git a/packages/wonder-blocks-tokens/src/index.ts b/packages/wonder-blocks-tokens/src/index.ts
index bdd3c9423..de69db0ab 100644
--- a/packages/wonder-blocks-tokens/src/index.ts
+++ b/packages/wonder-blocks-tokens/src/index.ts
@@ -4,12 +4,11 @@ import {color} from "./tokens/color";
 import {font} from "./tokens/font";
 import {spacing} from "./tokens/spacing";
 
+// media queries
+import {breakpoints, pureWidths} from "./tokens/media-queries";
 // semantic tokens
 import {semanticColor} from "./tokens/semantic-color";
 
-// media queries
-import {mediaQueries} from "./tokens/media-queries";
-
 // utils
 import {mix, fade} from "./util/utils";
 
@@ -24,7 +23,8 @@ export {
     /**
      * Media query breakpoints.
      */
-    mediaQueries,
+    breakpoints,
+    pureWidths,
     /**
      * Semantic tokens.
      */
diff --git a/packages/wonder-blocks-tokens/src/tokens/media-queries.ts b/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
index e15d44657..3612a42d7 100644
--- a/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
+++ b/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
@@ -5,27 +5,29 @@
  *
  */
 
-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 pureWidths = {
+    xsMax: 567,
+    smMin: 568,
+    smMax: 681,
+    mdMin: 682,
+    mdMax: 1023,
+    lgMin: 1024,
+} as const;
 
-export const mediaQueries = {
+export const breakpoints = {
     // 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})`,
+    xs: `@media screen and (max-width: ${pureWidths.xsMax}px) /* breakpoints.xs */`,
+    sm: `@media screen and (min-width: ${pureWidths.smMin}px) and (max-width: ${pureWidths.smMax}px) /* breakpoints.sm */`,
+    md: `@media screen and (min-width: ${pureWidths.mdMin}px) and (max-width: ${pureWidths.mdMax}px) /* breakpoints.md */`,
+    lg: `@media screen and (min-width: ${pureWidths.mdMin}px) and (max-width: ${pureWidths.lgMin}px) /* breakpoints.lg */`,
+    xl: `@media screen and (min-width: ${pureWidths.lgMin}px) /* breakpoints.xl */`,
 
-    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})`,
+    xsOrSmaller: `@media screen and (max-width: ${pureWidths.xsMax}px) /* breakpoints.xsOrSmaller */`,
+    smOrSmaller: `@media screen and (max-width: ${pureWidths.smMax}px) /* breakpoints.smOrSmaller */`,
+    mdOrSmaller: `@media screen and (max-width: ${pureWidths.mdMax}px) /* breakpoints.mdOrSmaller */`,
+    lgOrSmaller: `@media screen and (max-width: ${pureWidths.lgMin}px) /* breakpoints.lgOrSmaller */`,
 
-    smOrLarger: `@media screen and (min-width: ${pureSmMin})`,
-    mdOrLarger: `@media screen and (min-width: ${pureMdMin})`,
-    lgOrLarger: `@media screen and (min-width: ${pureLgMin})`,
+    smOrLarger: `@media screen and (min-width: ${pureWidths.smMin}px) /* breakpoints.smOrLarger */`,
+    mdOrLarger: `@media screen and (min-width: ${pureWidths.mdMin}px) /* breakpoints.mdOrLarger */`,
+    lgOrLarger: `@media screen and (min-width: ${pureWidths.lgMin}px) /* breakpoints.lgOrLarger */`,
 } as const;
diff --git a/types/aphrodite.d.ts b/types/aphrodite.d.ts
index 3c226e3de..2f7f0c600 100644
--- a/types/aphrodite.d.ts
+++ b/types/aphrodite.d.ts
@@ -1,6 +1,28 @@
 declare module "aphrodite" {
     import * as React from "react";
-    import {mediaQueries} from "../../packages/wonder-blocks-tokens";
+
+    const xs = "@media screen and (max-width: 567px) /* breakpoints.xs */";
+    const sm =
+        "@media screen and (min-width: 568px) and (max-width: 681px) /* breakpoints.sm */";
+    const md =
+        "@media screen and (min-width: 682px) and (max-width: 1023px) /* breakpoints.md */";
+    const lg =
+        "@media screen and (min-width: 682px) and (max-width: 1024px) /* breakpoints.lg */";
+    const xl = "@media screen and (min-width: 1024px) /* breakpoints.xl */";
+    const xsOrSmaller =
+        "@media screen and (max-width: 567px) /* breakpoints.xsOrSmaller */";
+    const smOrSmaller =
+        "@media screen and (max-width: 681px) /* breakpoints.smOrSmaller */";
+    const mdOrSmaller =
+        "@media screen and (max-width: 1023px) /* breakpoints.mdOrSmaller */";
+    const lgOrSmaller =
+        "@media screen and (min-width: 1024px) /* breakpoints.lgOrLarger */";
+    const smOrLarger =
+        "@media screen and (min-width: 568px) /* breakpoints.smOrLarger */";
+    const mdOrLarger =
+        "@media screen and (min-width: 682px) /* breakpoints.mdOrLarger */";
+    const lgOrLarger =
+        "@media screen and (min-width: 1024px) /* breakpoints.lgOrLarger */";
 
     type _CSSProperties = React.CSSProperties & {
         /**
@@ -18,18 +40,19 @@ declare module "aphrodite" {
         "@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;
+
+        [xs]?: React.CSSProperties;
+        [sm]?: React.CSSProperties;
+        [md]?: React.CSSProperties;
+        [lg]?: React.CSSProperties;
+        [xl]?: React.CSSProperties;
+        [xsOrSmaller]?: React.CSSProperties;
+        [smOrSmaller]?: React.CSSProperties;
+        [mdOrSmaller]?: React.CSSProperties;
+        [lgOrSmaller]?: React.CSSProperties;
+        [smOrLarger]?: React.CSSProperties;
+        [mdOrLarger]?: React.CSSProperties;
+        [lgOrLarger]?: React.CSSProperties;
     };
 
     /**

From b6ee2b76f79a5c3b96e140e28b3276b0be436073 Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Fri, 1 Nov 2024 14:57:37 -0700
Subject: [PATCH 07/13] Use singular variables and object structure

---
 .../tokens-media-queries.mdx                  | 45 +++++++++++++++----
 packages/wonder-blocks-tokens/src/index.ts    |  5 +--
 .../src/tokens/media-queries.ts               | 33 ++++++++------
 3 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
index 4b9ed5318..8a99ab4bc 100644
--- a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
+++ b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
@@ -14,36 +14,63 @@ import packageConfig from "../../packages/wonder-blocks-tokens/package.json";
 
 <ComponentInfo name={packageConfig.name} version={packageConfig.version} />
 
-All the available media query breakpoint values that can be used for min-width,
+All the available media query breakpoint values and pure widths that can be used for min-width,
 max-width, width, etc.
 
 ## Usage
 
-You can use these values directly by importing `breakpoints` from the
-`wonder-blocks-tokens` package and accessing the named property like so:
-`breakpoints.sm`.
+You can use mediaQueries and pure widths directly by importing `breakpoint` from the
+`wonder-blocks-tokens` package and accessing the named properties like so:
+`breakpoint.mediaQuery.sm`.
+
+### Media Queries
 
 ```js
-import {breakpoints} from "@khanacademy/wonder-blocks-tokens";
+import {breakpoint} from "@khanacademy/wonder-blocks-tokens";
 const styles = {
-    [breakpoints.sm]: {
+    [breakpoint.mediaQuery.sm]: {
         flexDirection: "column"
     }
 };
 ```
 
+### Pure widths
+
+```js
+import {breakpoint} from "@khanacademy/wonder-blocks-tokens";
+const styles = {
+    element: {
+        max-width: `${breakpoint.width.lg}px`
+    }
+};
+```
+
 ## Tokens
 
 <TokenTable
     columns={[
         {
-            label: "Token",
-            cell: (row) => <code>breakpoints.{row.label}</code>,
+            label: "Media Query Token",
+            cell: (row) => <code>breakpoint.mediaQuery.{row.label}</code>,
         },
         {
             label: "Value",
             cell: "value",
         },
     ]}
-    tokens={tokens.breakpoints}
+    tokens={tokens.breakpoint.mediaQuery}
 />
+
+<TokenTable
+    columns={[
+        {
+            label: "Width Token",
+            cell: (row) => <code>breakpoint.width.{row.label}</code>,
+        },
+        {
+            label: "Value",
+            cell: "value",
+        },
+    ]}
+    tokens={tokens.breakpoint.width}
+/>
\ No newline at end of file
diff --git a/packages/wonder-blocks-tokens/src/index.ts b/packages/wonder-blocks-tokens/src/index.ts
index de69db0ab..e56376a31 100644
--- a/packages/wonder-blocks-tokens/src/index.ts
+++ b/packages/wonder-blocks-tokens/src/index.ts
@@ -5,7 +5,7 @@ import {font} from "./tokens/font";
 import {spacing} from "./tokens/spacing";
 
 // media queries
-import {breakpoints, pureWidths} from "./tokens/media-queries";
+import {breakpoint} from "./tokens/media-queries";
 // semantic tokens
 import {semanticColor} from "./tokens/semantic-color";
 
@@ -23,8 +23,7 @@ export {
     /**
      * Media query breakpoints.
      */
-    breakpoints,
-    pureWidths,
+    breakpoint,
     /**
      * Semantic tokens.
      */
diff --git a/packages/wonder-blocks-tokens/src/tokens/media-queries.ts b/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
index 3612a42d7..a8fc03bae 100644
--- a/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
+++ b/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
@@ -5,7 +5,7 @@
  *
  */
 
-export const pureWidths = {
+const width = {
     xsMax: 567,
     smMin: 568,
     smMax: 681,
@@ -14,20 +14,25 @@ export const pureWidths = {
     lgMin: 1024,
 } as const;
 
-export const breakpoints = {
+const mediaQuery = {
     // Named
-    xs: `@media screen and (max-width: ${pureWidths.xsMax}px) /* breakpoints.xs */`,
-    sm: `@media screen and (min-width: ${pureWidths.smMin}px) and (max-width: ${pureWidths.smMax}px) /* breakpoints.sm */`,
-    md: `@media screen and (min-width: ${pureWidths.mdMin}px) and (max-width: ${pureWidths.mdMax}px) /* breakpoints.md */`,
-    lg: `@media screen and (min-width: ${pureWidths.mdMin}px) and (max-width: ${pureWidths.lgMin}px) /* breakpoints.lg */`,
-    xl: `@media screen and (min-width: ${pureWidths.lgMin}px) /* breakpoints.xl */`,
+    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: ${pureWidths.xsMax}px) /* breakpoints.xsOrSmaller */`,
-    smOrSmaller: `@media screen and (max-width: ${pureWidths.smMax}px) /* breakpoints.smOrSmaller */`,
-    mdOrSmaller: `@media screen and (max-width: ${pureWidths.mdMax}px) /* breakpoints.mdOrSmaller */`,
-    lgOrSmaller: `@media screen and (max-width: ${pureWidths.lgMin}px) /* breakpoints.lgOrSmaller */`,
+    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: ${pureWidths.smMin}px) /* breakpoints.smOrLarger */`,
-    mdOrLarger: `@media screen and (min-width: ${pureWidths.mdMin}px) /* breakpoints.mdOrLarger */`,
-    lgOrLarger: `@media screen and (min-width: ${pureWidths.lgMin}px) /* breakpoints.lgOrLarger */`,
+    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 */`,
 } as const;
+
+export const breakpoint = {
+    width,
+    mediaQuery,
+};

From 10ec9f859172d05cbb247d70aa3e0eb0ee45fd31 Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Fri, 1 Nov 2024 14:59:43 -0700
Subject: [PATCH 08/13] Use CSS-in-JS syntax in docs

---
 __docs__/wonder-blocks-tokens/tokens-media-queries.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
index 8a99ab4bc..b67a614f7 100644
--- a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
+++ b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
@@ -40,7 +40,7 @@ const styles = {
 import {breakpoint} from "@khanacademy/wonder-blocks-tokens";
 const styles = {
     element: {
-        max-width: `${breakpoint.width.lg}px`
+        maxWidth: `${breakpoint.width.lg}px`
     }
 };
 ```

From 4aba49415e053273b3f42ad8679bc4d981ba57cd Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Fri, 1 Nov 2024 14:59:50 -0700
Subject: [PATCH 09/13] Update type definition

---
 types/aphrodite.d.ts | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/types/aphrodite.d.ts b/types/aphrodite.d.ts
index 2f7f0c600..179fbc10d 100644
--- a/types/aphrodite.d.ts
+++ b/types/aphrodite.d.ts
@@ -1,28 +1,30 @@
 declare module "aphrodite" {
     import * as React from "react";
 
-    const xs = "@media screen and (max-width: 567px) /* breakpoints.xs */";
+    const xs =
+        "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xs */";
     const sm =
-        "@media screen and (min-width: 568px) and (max-width: 681px) /* breakpoints.sm */";
+        "@media screen and (min-width: 568px) and (max-width: 681px) /* breakpoint.mediaQuery.sm */";
     const md =
-        "@media screen and (min-width: 682px) and (max-width: 1023px) /* breakpoints.md */";
+        "@media screen and (min-width: 682px) and (max-width: 1023px) /* breakpoint.mediaQuery.md */";
     const lg =
-        "@media screen and (min-width: 682px) and (max-width: 1024px) /* breakpoints.lg */";
-    const xl = "@media screen and (min-width: 1024px) /* breakpoints.xl */";
+        "@media screen and (min-width: 682px) and (max-width: 1024px) /* breakpoint.mediaQuery.lg */";
+    const xl =
+        "@media screen and (min-width: 1024px) /* breakpoint.mediaQuery.xl */";
     const xsOrSmaller =
-        "@media screen and (max-width: 567px) /* breakpoints.xsOrSmaller */";
+        "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xsOrSmaller */";
     const smOrSmaller =
-        "@media screen and (max-width: 681px) /* breakpoints.smOrSmaller */";
+        "@media screen and (max-width: 681px) /* breakpoint.mediaQuery.smOrSmaller */";
     const mdOrSmaller =
-        "@media screen and (max-width: 1023px) /* breakpoints.mdOrSmaller */";
+        "@media screen and (max-width: 1023px) /* breakpoint.mediaQuery.mdOrSmaller */";
     const lgOrSmaller =
-        "@media screen and (min-width: 1024px) /* breakpoints.lgOrLarger */";
+        "@media screen and (min-width: 1024px) /* breakpoint.mediaQuery.lgOrLarger */";
     const smOrLarger =
-        "@media screen and (min-width: 568px) /* breakpoints.smOrLarger */";
+        "@media screen and (min-width: 568px) /* breakpoint.mediaQuery.smOrLarger */";
     const mdOrLarger =
-        "@media screen and (min-width: 682px) /* breakpoints.mdOrLarger */";
+        "@media screen and (min-width: 682px) /* breakpoint.mediaQuery.mdOrLarger */";
     const lgOrLarger =
-        "@media screen and (min-width: 1024px) /* breakpoints.lgOrLarger */";
+        "@media screen and (min-width: 1024px) /* breakpoint.mediaQuery.lgOrLarger */";
 
     type _CSSProperties = React.CSSProperties & {
         /**

From d6f6bde20098f8440e572fdae7cdab0e3bce50b1 Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Mon, 4 Nov 2024 09:33:53 -0800
Subject: [PATCH 10/13] Update comments

---
 packages/wonder-blocks-tokens/src/tokens/media-queries.ts | 4 +++-
 types/aphrodite.d.ts                                      | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/wonder-blocks-tokens/src/tokens/media-queries.ts b/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
index a8fc03bae..a0d79b844 100644
--- a/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
+++ b/packages/wonder-blocks-tokens/src/tokens/media-queries.ts
@@ -5,6 +5,7 @@
  *
  */
 
+/* Pure width values */
 const width = {
     xsMax: 567,
     smMin: 568,
@@ -14,8 +15,9 @@ const width = {
     lgMin: 1024,
 } as const;
 
+/* Named mediaQuery conditions */
 const mediaQuery = {
-    // Named
+    // Note: any updates to this will need to be replicated in /types/aphrodite.d.ts
     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 */`,
diff --git a/types/aphrodite.d.ts b/types/aphrodite.d.ts
index 179fbc10d..b061466ae 100644
--- a/types/aphrodite.d.ts
+++ b/types/aphrodite.d.ts
@@ -1,6 +1,7 @@
 declare module "aphrodite" {
     import * as React from "react";
 
+    // Note: Updates here are also needed in /wonder-blocks-tokens/src/tokens/media-queries.ts
     const xs =
         "@media screen and (max-width: 567px) /* breakpoint.mediaQuery.xs */";
     const sm =

From cae510ff9c7a9f92e94d407db2c7a97bea541d6a Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Mon, 4 Nov 2024 09:42:23 -0800
Subject: [PATCH 11/13] Add docs comments

---
 .../wonder-blocks-tokens/tokens-media-queries.mdx   | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
index b67a614f7..d78b57ad2 100644
--- a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
+++ b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
@@ -19,12 +19,12 @@ max-width, width, etc.
 
 ## Usage
 
-You can use mediaQueries and pure widths directly by importing `breakpoint` from the
-`wonder-blocks-tokens` package and accessing the named properties like so:
-`breakpoint.mediaQuery.sm`.
-
 ### Media Queries
 
+You can use mediaQuery conditions by importing `breakpoint` from the
+`wonder-blocks-tokens` package and accessing its object properties for sizing like so:
+`breakpoint.mediaQuery.sm`.
+
 ```js
 import {breakpoint} from "@khanacademy/wonder-blocks-tokens";
 const styles = {
@@ -36,6 +36,11 @@ const styles = {
 
 ### Pure widths
 
+You can also use pure width values by importing `breakpoint` from the
+`wonder-blocks-tokens` package and accessing the `width` object:
+`breakpoint.width.sm`. The pixel values are returned as raw numbers without a unit.
+You can interpolate a string to add the `px` unit like so:
+
 ```js
 import {breakpoint} from "@khanacademy/wonder-blocks-tokens";
 const styles = {

From 9733fc0b0f7b8f4d350984c21b58f58d93b769b7 Mon Sep 17 00:00:00 2001
From: Marcy Sutton Todd <marcytodd@khanacademy.org>
Date: Mon, 4 Nov 2024 09:44:08 -0800
Subject: [PATCH 12/13] Update docs comment with usage

---
 __docs__/wonder-blocks-tokens/tokens-media-queries.mdx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
index d78b57ad2..dd5545d20 100644
--- a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
+++ b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
@@ -38,8 +38,9 @@ const styles = {
 
 You can also use pure width values by importing `breakpoint` from the
 `wonder-blocks-tokens` package and accessing the `width` object:
-`breakpoint.width.sm`. The pixel values are returned as raw numbers without a unit.
-You can interpolate a string to add the `px` unit like so:
+`breakpoint.width.sm`. These can be useful for tooling or in CSS where a number value
+is needed. Therefore, pixel values are returned without a unit. You can interpolate
+a string to add the `px` unit like so:
 
 ```js
 import {breakpoint} from "@khanacademy/wonder-blocks-tokens";

From 72aafe25b68d2c4cbca1d9b7829dd4dd564da00d Mon Sep 17 00:00:00 2001
From: Marcy Sutton-Todd <marcytodd@khanacademy.org>
Date: Mon, 4 Nov 2024 13:32:04 -0800
Subject: [PATCH 13/13] Add unit to docs column label

Co-authored-by: Bea Esguerra <beaesguerra@users.noreply.github.com>
---
 __docs__/wonder-blocks-tokens/tokens-media-queries.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
index dd5545d20..86af53b25 100644
--- a/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
+++ b/__docs__/wonder-blocks-tokens/tokens-media-queries.mdx
@@ -74,7 +74,7 @@ const styles = {
             cell: (row) => <code>breakpoint.width.{row.label}</code>,
         },
         {
-            label: "Value",
+            label: "Value (px)",
             cell: "value",
         },
     ]}