Merge branch 'main' into spectrum-tokens-18

adobe · Oct 20, 2020 · a449613 · a449613
2 parents 0828cb1 + 1a604c4
commit a449613
Show file tree

Hide file tree

Showing 35 changed files with 697 additions and 665 deletions.
diff --git a/components/actionbar/index.css b/components/actionbar/index.css
@@ -85,7 +85,8 @@ governing permissions and limitations under the License.
   block-size: var(--spectrum-actionbar-height);
   min-inline-size: var(--spectrum-actionbar-min-width);
   max-inline-size: var(--spectrum-actionbar-max-width);
-  padding: 0 var(--spectrum-actionbar-padding-right) 0 var(--spectrum-actionbar-padding-left);
+  padding-inline-start: var(--spectrum-actionbar-padding-left);
+  padding-inline-end: var(--spectrum-actionbar-padding-right);
 
   flex-direction: row;
   align-items: center;

diff --git a/components/calendar/skin.css b/components/calendar/skin.css
@@ -116,6 +116,10 @@ governing permissions and limitations under the License.
         background: var(--spectrum-calendar-day-background-color-selected-hover);
       }
     }
+
+    &:before {
+      border-color: var(--spectrum-calendar-day-border-color-key-focus);
+    }
   }
 
   &.is-disabled {

diff --git a/components/card/metadata/card-asset.yml b/components/card/metadata/card-asset.yml
@@ -5,8 +5,8 @@ sections:
     description: |
       ### Use Spectrum Heading for title and Spectrum Detail for subtitle
       To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
-        * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
-        * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+        * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+        * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
   - id: card-asset
     name: Standard
@@ -20,10 +20,10 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">

diff --git a/components/card/metadata/card-gallery.yml b/components/card/metadata/card-gallery.yml
@@ -8,8 +8,8 @@ sections:
       Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
       ### Use Spectrum Heading for title and Spectrum Detail for subtitle
       To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
-        * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
-        * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+        * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+        * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
   - id: card-gallery
     name: Standard
@@ -23,8 +23,8 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
               <div class="spectrum-Card-description">10/15/18</div>
               <div class="spectrum-Card-actionButton">
                 <div style="display: inline-block;">

diff --git a/components/card/metadata/card.yml b/components/card/metadata/card.yml
@@ -6,8 +6,8 @@ sections:
       Please replace `.spectrum-Icon--sizeS` with `.spectrum-Icon--sizeM`.
       ### Use Spectrum Heading for title and Spectrum Detail for subtitle
       To make the card component more flexible, products can have more fine control over the typography by using the Heading and Detail components with their corresponding sizes. To be more consistent with previous card designs you can use the following:
-        * Add the `spectrum-Heading` and `spectrum-Heading--XS` or `spectrum-Heading--XXS` to the `spectrum-Card-title` element.
-        * Add the `spectrum-Detail` and `spectrum-Detail--S` classes to `spectrum-Card-subtitle`.
+        * Add the `spectrum-Heading` and `spectrum-Heading--sizeXS` or `spectrum-Heading--sizeXXS` to the `spectrum-Card-title` element.
+        * Add the `spectrum-Detail` and `spectrum-Detail--sizeS` classes to `spectrum-Card-subtitle`.
 examples:
   - id: card
     name: Standard
@@ -18,7 +18,7 @@ examples:
           <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
               <div class="spectrum-Card-actionButton">
                 <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
                   <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
@@ -28,7 +28,7 @@ examples:
               </div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
           <div class="spectrum-Card-footer">
@@ -59,7 +59,7 @@ examples:
             <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
             <div class="spectrum-Card-body">
               <div class="spectrum-Card-header">
-                <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+                <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
                 <div class="spectrum-Card-actionButton">
                   <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
                     <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
@@ -69,7 +69,7 @@ examples:
                 </div>
               </div>
               <div class="spectrum-Card-content">
-                <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+                <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
               </div>
             </div>
             <div class="spectrum-Card-footer">
@@ -104,7 +104,7 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
               <div class="spectrum-Card-actionButton">
                 <div style="display: inline-block;">
                   <button aria-haspopup="true" class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
@@ -116,7 +116,7 @@ examples:
               </div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
               <div class="spectrum-Card-description">10/15/18</div>
             </div>
           </div>
@@ -151,10 +151,10 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">FileName</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">FileName</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">pdf</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">pdf</div>
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
@@ -191,7 +191,7 @@ examples:
               <div class="spectrum-Card-title">FolderName</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">folder</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">folder</div>
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-quickActions">
@@ -218,10 +218,10 @@ examples:
           <div class="spectrum-Card-coverPhoto" style="background-image: url(img/example-card-portrait.jpg)"></div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
           <div class="spectrum-Card-footer">
@@ -255,10 +255,10 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Card Title</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Card Title</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
         </div>
@@ -276,10 +276,10 @@ examples:
           </div>
           <div class="spectrum-Card-body">
             <div class="spectrum-Card-header">
-              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+              <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
             </div>
             <div class="spectrum-Card-content">
-              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+              <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
             </div>
           </div>
           <div class="spectrum-QuickActions spectrum-Card-actions">
@@ -319,10 +319,10 @@ examples:
             </div>
             <div class="spectrum-Card-body">
               <div class="spectrum-Card-header">
-                <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--XS">Name</div>
+                <div class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS">Name</div>
               </div>
               <div class="spectrum-Card-content">
-                <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--S">jpg</div>
+                <div class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS">jpg</div>
               </div>
             </div>
             <div class="spectrum-QuickActions spectrum-Card-actions">

diff --git a/components/checkbox/metadata/checkbox.yml b/components/checkbox/metadata/checkbox.yml
@@ -18,7 +18,7 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
           <label class="spectrum-Checkbox">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
@@ -65,7 +65,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
           <label class="spectrum-Checkbox is-invalid">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
@@ -111,7 +111,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
           <label class="spectrum-Checkbox is-disabled">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>
@@ -163,7 +163,7 @@ examples:
     markup: |
       <div class="spectrum-Examples">
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Default</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
 
           <label class="spectrum-Checkbox spectrum-Checkbox--emphasized">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
@@ -210,8 +210,8 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Invalid</h4>
-          <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-invalid">
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>
+          <label class="spectrum-Checkbox spectrum-Checkbox--quiet is-invalid">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-0">
             <span class="spectrum-Checkbox-box">
               <svg class="spectrum-Icon spectrum-UIIcon-Checkmark75 spectrum-Checkbox-checkmark" focusable="false" aria-hidden="true">
@@ -256,7 +256,7 @@ examples:
         </div>
 
         <div class="spectrum-Examples-item">
-          <h4 class="spectrum-Heading spectrum-Heading--XS spectrum-Examples-itemHeading">Disabled</h4>
+          <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
 
           <label class="spectrum-Checkbox spectrum-Checkbox--emphasized is-disabled">
             <input type="checkbox" class="spectrum-Checkbox-input" id="checkbox-3" disabled>

diff --git a/components/divider/metadata/divider.yml b/components/divider/metadata/divider.yml
@@ -13,19 +13,19 @@ examples:
   - id: divider-large
     name: 'Large'
     markup: |
-      <h2 class="spectrum-Heading spectrum-Heading--M">Large</h2>
+      <h2 class="spectrum-Heading spectrum-Heading--sizeM">Large</h2>
       <hr class="spectrum-Divider spectrum-Divider--large">
       <p class="spectrum-Body">Page or Section Titles.</p>
   - id: divider-medium
     name: 'Medium'
     markup: |
-      <h2 class="spectrum-Heading spectrum-Heading--S">Medium</h2>
+      <h2 class="spectrum-Heading spectrum-Heading--sizeS">Medium</h2>
       <hr class="spectrum-Divider spectrum-Divider--medium">
       <p class="spectrum-Body">Divide subsections, or divide different groups of elements (between panels, rails, etc.)</p>
   - id: divider-small
     name: 'Small'
     markup: |
-      <h2 class="spectrum-Heading spectrum-Heading--XS">Small</h2>
+      <h2 class="spectrum-Heading spectrum-Heading--sizeXS">Small</h2>
       <hr class="spectrum-Divider spectrum-Divider--small">
       <p class="spectrum-Body">Divide like-elements (tables, tool groups, elements within a panel, etc.)</p>
   - id: divider-vertical-small