feat: adding t-shirt sized typography, fixes #210, closes #416 (#408)

* docs: swap out the Typekit Ids
* docs: typography metadata fixes and deprecation bits (#523)
* docs: support hiding examples, disabling fastLoad
* docs: support changing Variants heading, enable Spectrum cards
* docs: Typography landing page
* docs: hide old Typography (but link to it from the main page)
* docs: remove Tool from menu, fix ButtonGroup Spectrum link
* docs: add link to Tool in ActionButton description

Co-authored-by: Larry Davis <[email protected]>

README.md

@@ -136,6 +136,7 @@ When this file is imported, if in updated version of `@spectrum-css/vars` change
 
 In most cases, this file will not be required, so you can safely ignore it. If you see unexpected visual changes creeping into components that you have not updated, `dist/vars.css` may correct them.
 
+
 ## Contributing
 
 Check out the [contributing guidelines](.github/CONTRIBUTING.md) for quick start information, and head over to the [component documentation](components/README.md) and [bundle documentation](bundles/README.md) for more information.
@@ -222,6 +223,8 @@ The following tasks are available:
 - `gulp packageLint` - Lint the `package.json` file for each component in the monorepo
 - `gulp readmeLint` - Generate a generic `README.md` file for each component in the monorepo
 
+
+
 ## Testing
 
 Visual regression testing is implemented by [BackstopJS](https://github.com/garris/BackstopJS). In order to avoid browser rendering inconsistent issue on different environments, the test needs to run inside of docker container.
@@ -256,6 +259,9 @@ Both `backstop:test` and `backstop:docker:test` accept arguments to customize yo
 - `npm run backstop:docker:test themes=lightest,light scales=medium,large radio` - Run test for `radio` and its dependents components with color stop as `lightest` and `light` and scale as `medium` and `large`. It means that a single scenario will run 4 times.
 - `npm run backstop:docker:test themes=lightest,light,dark,darkest scales=medium,large` - Run test for all the components with all the color and scale combinations. It means that a single scenario will be run 8 times.
 
+___
+
+
 ## Releasing
 
 ### Releasing individual components

components/button/metadata/actionbutton.yml

@@ -191,6 +191,7 @@ examples:
       </button>
   - id: actionbutton-quiet
     name: Quiet
+    description: The Quiet Action Button should be used where you previously used the [deprecated Tool component](tool.html).
     markup: |
       <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
         <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">

components/button/metadata/tool.yml

@@ -1,7 +1,8 @@
 name: Tool
-status: Verified
+dnaStatus: Deprecated
 description: The tool button.
 SpectrumSiteSlug: https://spectrum.adobe.com/page/tool/
+hide: true
 examples:
   - name: Standard
     markup: |

components/buttongroup/metadata/buttongroup.yml

@@ -1,5 +1,5 @@
 name: Button Group
-SpectrumSiteSlug: https://spectrum.corp.adobe.com/page/button/
+SpectrumSiteSlug: https://spectrum.adobe.com/page/button/
 examples:
   - id: buttongroup
     name: Horizontal

components/commons/fonts.css

@@ -27,15 +27,15 @@ governing permissions and limitations under the License.
   --spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base);
   */
 
-  --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-han: 'adobe-clean-han-japanese', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-he: 'adobe-hebrew', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun', 'Heiti SC Light', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-zh: var(--spectrum-font-family-zhhans);
-  --spectrum-font-family-zhhant: 'adobe-clean-han-traditional', 'Microsoft JhengHei UI', 'Microsoft JhengHei', 'Heiti TC Light', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic', 'Apple Gothic', var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-ja: 'adobe-clean-han-japanese', 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4  Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-base: var(--spectrum-alias-body-text-font-family);
+  --spectrum-font-family-ar: var(--spectrum-alias-font-family-ar);
+  --spectrum-font-family-he:  var(--spectrum-alias-font-family-he);
+  --spectrum-font-family-zh: var(--spectrum-alias-font-family-zh);
+  --spectrum-font-family-zhhans: var(--spectrum-alias-font-family-zhhans);
+  --spectrum-font-family-ko: var(--spectrum-alias-font-family-ko);
+  --spectrum-font-family-ja: var(--spectrum-alias-font-family-ja);
+  --spectrum-font-family-han: var(--spectrum-alias-font-family-zh);
+  --spectrum-font-family-zhhant: var(--spectrum-alias-font-family-zh);
   --spectrum-text-size: var(--spectrum-alias-font-size-default);
   --spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium);
   --spectrum-text-size-text-label: var(--spectrum-label-text-size);

components/dropzone/metadata/dropzone.yml

@@ -7,7 +7,7 @@ examples:
       <div class="spectrum-Dropzone" role="region" tabindex="0" style="width: 300px;">
         <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
           <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
-          <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+          <h2 class="spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
           <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
         </div>
       </div>
@@ -17,7 +17,7 @@ examples:
       <div class="spectrum-Dropzone is-dragged" role="region" tabindex="0" style="width: 300px;">
         <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
           <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
-          <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+          <h2 class="spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
           <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
         </div>
       </div>

components/illustratedmessage/metadata/illustratedmessage.yml

@@ -7,7 +7,7 @@ examples:
     markup: |
       <div class="spectrum-IllustratedMessage">
         <svg class="spectrum-IllustratedMessage-illustration" xmlns="http://www.w3.org/2000/svg" width="200" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="illustrations"><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></g></g></svg>
-        <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Error 404: Page Not Found</h2>
+        <h2 class="spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Error 404: Page Not Found</h2>
         <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description">This page isn't available. Try checking the URL or visit a different page.</p>
       </div>
   - id: illustratedmessage-default
@@ -16,6 +16,6 @@ examples:
     markup: |
       <div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
         <svg class="spectrum-IllustratedMessage-illustration" width="199" height="98" viewBox="0 0 199 97.7"><defs><style>.cls-1,.cls-2{fill:none;stroke-linecap:round;stroke-linejoin:round;}.cls-1{stroke-width:3px;}.cls-2{stroke-width:2px;}</style></defs><path class="cls-1" d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"/><line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5"/><path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43"/><path class="cls-1" d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"/><line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5"/><path class="cls-2" d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"/><path class="cls-2" d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"/><path class="cls-2" d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"/><path class="cls-1" d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"/><rect class="cls-1" x="1.5" y="34.5" width="58" height="39" rx="2" ry="2"/></svg>
-        <h2 class="spectrum-Heading spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
+        <h2 class="spectrum-Heading--pageTitle spectrum-IllustratedMessage-heading">Drag and Drop Your File</h2>
         <p class="spectrum-Body--secondary spectrum-IllustratedMessage-description"><a href="#" class="spectrum-Link">Select a File</a> from your computer<br> or <a href="#" class="spectrum-Link">Search Adobe Stock</a></p>
       </div>

components/site/index.css

@@ -364,7 +364,7 @@ governing permissions and limitations under the License.
 
 .spectrum-CSSComponent-resource--adobe {
   color: rgb(255, 2, 1) !important;
-  background-color: rgba(255, 2, 1, 0.1) !important;
+  background-color: var(--spectrum-global-color-gray-100) !important;
 }
 
 .spectrum-CSSComponent-resource--github {