@ornikar/bumper 2.7.2-canary.1768565076.501fccaa5e4ef824bb180cfd40a7e74454a29a3e.0 → 2.8.0

package/src/system/core/tokens/__snapshots_web__/space.stories.tsx.snap

@@ -0,0 +1,396 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Tokens Space 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa1366020284"
+          >
+            <span
+              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-head100347201 _lh-f-lineHeigh1544154440 _ls-f-letterSpa1195674547 _fw-f-weight-se1074390495"
+              data-disable-theme="true"
+            >
+              Space Tokens
+            </span>
+            <span
+              class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1504 _lh-f-lineHeigh201793147 _ls-f-letterSpa1099960304 _col-content--ba1918259606"
+              data-disable-theme="true"
+            >
+              Space tokens define consistent spacing values used for padding, margin, and gap properties.
+            </span>
+            <div
+              class="is_VStack _dsp-flex _alignItems-stretch _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-column _gap-t-space-spa94482166"
+            >
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.none
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    0px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-0px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.2
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    2px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-2px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.4
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    4px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-4px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.8
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    8px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-8px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.12
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    12px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-12px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.16
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    16px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-16px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.24
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    24px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-24px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.32
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    32px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-32px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.40
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    40px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-40px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.48
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    48px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-48px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.56
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    56px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-56px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.64
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    64px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-64px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+              <div
+                class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
+              >
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-150px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-bo3448"
+                    data-disable-theme="true"
+                  >
+                    $space.80
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-60px"
+                >
+                  <span
+                    class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _col-content--ba1918259606"
+                    data-disable-theme="true"
+                  >
+                    80px
+                  </span>
+                </div>
+                <div
+                  class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _backgroundColor-bg--accent-1633109644 _height-t-size-size1385442 _width-80px _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416"
+                />
+              </div>
+            </div>
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

package/src/system/core/tokens/breakpoints.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { HStack, VStack } from '../primitives/Stack';
+import { View } from '../primitives/View';
+import { breakpoints } from './breakpoints';
+
+const meta: Meta = {
+  title: 'Bumper/Core/Tokens',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Breakpoints: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <Typography.Text variant="body-m" color="$content.base.mid">
+        Breakpoint tokens define the screen width thresholds for responsive design.
+      </Typography.Text>
+      <VStack gap="$space.8">
+        {Object.entries(breakpoints).map(([name, value]) => (
+          <HStack key={name} gap="$space.16" alignItems="center">
+            <View width={120}>
+              <Typography.Text variant="body-s" weight="bold">
+                {name}
+              </Typography.Text>
+            </View>
+            <View width={80}>
+              <Typography.Text variant="body-s" color="$content.base.mid">
+                {value === 0 ? '0px' : `>= ${value}px`}
+              </Typography.Text>
+            </View>
+            <View flexGrow={1} maxWidth={400}>
+              <View
+                backgroundColor="$bg.accent.default"
+                height="$size.24"
+                width={Math.min((value / 1280) * 100 + 10, 100)}
+                borderRadius="$radius.s"
+              />
+            </View>
+          </HStack>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+};

package/src/system/core/tokens/fonts.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { HStack, VStack } from '../primitives/Stack';
+import { View } from '../primitives/View';
+import { VARIANTS, lineHeight, size } from './fonts';
+
+const meta: Meta = {
+  title: 'Bumper/Core/Tokens',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Fonts: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <Typography.Text variant="body-m" color="$content.base.mid">
+        Font tokens define typography styles including variants, sizes, line heights, letter spacing, and weights.
+      </Typography.Text>
+      <VStack gap="$space.4">
+        {VARIANTS.map((variant) => (
+          <HStack key={variant} gap="$space.16" alignItems="center">
+            <View width={180}>
+              <Typography.Text variant="body-s" weight="bold">
+                {variant}
+              </Typography.Text>
+            </View>
+            <View width={80}>
+              <Typography.Text variant="body-xs" color="$content.base.mid">
+                {size[variant]}px / {lineHeight[variant]}px
+              </Typography.Text>
+            </View>
+            <Typography.Text variant={variant}>The quick brown fox</Typography.Text>
+          </HStack>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+};