{"version":3,"sources":["webpack:///./src/pages/mt/utilities/shadow/design.js"],"names":["site","data","slug","title","state","exclusive","to","class"],"mappings":"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","file":"component---src-pages-mt-utilities-shadow-design-js-d6d55b4f31b62111c1ee.js","sourcesContent":["import React from 'react'\nimport { Link } from 'gatsby'\nimport {\n  Header,\n  Layout,\n  SectionTitle,\n  ItemTitle,\n  Intro,\n} from '../../../../components'\nimport data from './data.json'\n\nexport default () => {\n  return (\n    <>\n      <Header\n        site={data.site}\n        slug={data.slug + '/design/'}\n        title={data.title}\n        state=\"design\"\n        exclusive={true}\n      />\n      <Layout\n        site={data.site}\n        slug={data.slug + '/design/'}\n        title={data.title}\n        state=\"design\"\n      >\n        <Intro>\n          <p>\n            Shadow styles create the perception of{' '}\n            <Link\n              to={'/' + data.site + '/guidelines/elevation/design'}\n              class=\"link\"\n            >\n              elevation\n            </Link>{' '}\n            along the z-axis to communicate hierarchy and organize information\n            within a design.\n          </p>\n        </Intro>\n\n        <SectionTitle>Shadow Variants</SectionTitle>\n\n        <ItemTitle>Small</ItemTitle>\n        <p>\n          Use to position an object a small distance above the pane or level\n          behind it. Artificially elevated objects, as well as elevated objects\n          on the interaction level will use this style.\n        </p>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <thead>\n            <th> </th>\n            <th>Key</th>\n            <th>Ambient</th>\n            <th>Usage</th>\n          </thead>\n          <tbody>\n            <tr class=\"showcase-table__white-row\">\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__box u-shadow-small--down\"></span>\n                  Small / Down\n                </div>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, 1</strong>\n                <br />\n                blur: <strong>2</strong>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, 2</strong>\n                <br />\n                blur: <strong>4</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For small distances on a mid-screen or top-aligned object\n              </td>\n            </tr>\n            <tr class=\"showcase-table__grey-row\">\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__box u-shadow-small--up\"></span>\n                  Small / Up\n                </div>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, -1</strong>\n                <br />\n                blur: <strong>2</strong>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, -2</strong>\n                <br />\n                blur: <strong>4</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For small distances on a bottom-aligned object\n              </td>\n            </tr>\n          </tbody>\n        </table>\n\n        <ItemTitle>Medium</ItemTitle>\n        <p>\n          Use to position an object a medium distance above the pane or level\n          behind it. Elevated objects on the frame level will use this style.\n        </p>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__white-row\">\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__box u-shadow-medium--down\"></span>\n                  Medium / Down\n                </div>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, 2</strong>\n                <br />\n                blur: <strong>4</strong>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, 4</strong>\n                <br />\n                blur: <strong>8</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For medium distances on a mid-screen or top-aligned object\n              </td>\n            </tr>\n            <tr class=\"showcase-table__grey-row\">\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__box u-shadow-medium--up\"></span>\n                  Medium / Up\n                </div>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, -2</strong>\n                <br />\n                blur: <strong>4</strong>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, -4</strong>\n                <br />\n                blur: <strong>8</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For medium distances on a bottom-aligned object\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle>Large</ItemTitle>\n        <p>\n          Use to position an object a large distance above the pane or level\n          behind it. Elevated objects on the attention pane will use this style.\n        </p>\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__white-row\">\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__box u-shadow-large--down\"></span>\n                  Large / Down\n                </div>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, 3</strong>\n                <br />\n                blur: <strong>6</strong>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, 6</strong>\n                <br />\n                blur: <strong>12</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For large distances on a mid-screen or top-aligned object\n              </td>\n            </tr>\n            <tr class=\"showcase-table__grey-row\">\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__box u-shadow-large--up\"></span>\n                  Large / Up\n                </div>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, -3</strong>\n                <br />\n                blur: <strong>6</strong>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, -6</strong>\n                <br />\n                blur: <strong>12</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For large distances on a bottom-aligned object\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle>Extra Large</ItemTitle>\n        <p>\n          Use to position an object a large distance above the pane or level\n          behind it. Elevated objects on the attention pane will use this style.\n        </p>\n\n        <table class=\"showcase-table l-margin-bottom--none\">\n          <tbody>\n            <tr class=\"showcase-table__white-row\">\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__box u-shadow-xlarge--down\"></span>\n                  Extra Large / Down\n                </div>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, 4</strong>\n                <br />\n                blur: <strong>8</strong>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, 8</strong>\n                <br />\n                blur: <strong>16</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For large distances on a mid-screen or top-aligned object\n              </td>\n            </tr>\n            <tr class=\"showcase-table__grey-row\">\n              <td>\n                <div class=\"u-flex-container u-flex-align--middle\">\n                  <span class=\"table__box u-shadow-xlarge--up\"></span>\n                  Extra Large / Up\n                </div>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, -4</strong>\n                <br />\n                blur: <strong>8</strong>\n              </td>\n              <td class=\"showcase-table__font-values\">\n                color: <strong>#000</strong>\n                <br />\n                x, y: <strong>0, -8</strong>\n                <br />\n                blur: <strong>16</strong>\n              </td>\n              <td class=\"showcase-table__usage\">\n                For large distances on a bottom-aligned object\n              </td>\n            </tr>\n          </tbody>\n        </table>\n        <ItemTitle>None</ItemTitle>\n        <p>\n          Use when an object is embedded within a given pane or level and not\n          elevated above it. All objects in the foundational pane will use this\n          style.\n        </p>\n        <hr />\n        <SectionTitle>Design Environment</SectionTitle>\n        <p>\n          Consult the{' '}\n          <Link\n            to={'/' + data.site + '/guidelines/elevation/design'}\n            class=\"link\"\n          >\n            elevation\n          </Link>{' '}\n          guidelines to select the appropriate shadow size for an object, based\n          on its position along the z-axis. Only apply shadows in the up\n          direction when the down direction would be lost along the bottom edge\n          of the screen or parent element.\n        </p>\n      </Layout>\n    </>\n  )\n}\n"],"sourceRoot":""}