Clean comments and fix spacing

Author: maureenlholland

assets/sass/protocol/base/elements/_links.scss

@@ -32,7 +32,7 @@ a:where(:visited) {
     --link-color: var(--link-color-inverse);
     --link-color-hover: var(--link-color-hover-inverse);
     --link-color-visited: var(--link-color-visited-inverse);
-    --link-color-visited-hover:var(--link-color-visited-hover-inverse);
+    --link-color-visited-hover: var(--link-color-visited-hover-inverse);
 }
 
 // any descendant link will inherit white theming (replace white-links mixin)
@@ -44,9 +44,7 @@ a:where(:visited) {
     --link-color-visited-hover: #{$color-white};
 }
 
-// this might belong in a different CTA file?
-// it's not meant to apply to `a` elements unless they have the class added directly
-// the other classes in this file are theme containers that select `a` elements inside them
+// apply directly to link
 .mzp-c-cta-link {
     font-family: var(--button-font-family);
     font-weight: bold;

assets/sass/protocol/components/_button.scss

@@ -76,7 +76,7 @@
 // * -------------------------------------------------------------------------- */
 // Button shape and size
 
-.mzp-c-button /* stylelint-disable-line no-duplicate-selectors */ {
+.mzp-c-button {
     @include border-box;
     @include font-size(16px);
     @include transition(background-color 100ms, box-shadow 100ms, color 100ms);

components/button/button.config.yml

@@ -1,46 +1,55 @@
 context:
   label: Primary Button
+  link: './button'
 default: Primary
 variants:
   - name: Primary Dark
     preview: '@preview-dark'
     notes: Add the class `mzp-t-dark` for use on dark backgrounds (the button itself is light).
+    link: './button'
     context:
       class: 'mzp-t-dark'
   - name: Secondary
     notes: A less prominent button with a hollow, transparent background. Use this for any additional actions someone can take on any given page that is different from the primary action.
+    link: './button'
     context:
       class: 'mzp-t-secondary'
       label: Secondary Button
   - name: Secondary Dark
     preview: '@preview-dark'
+    link: './button'
     notes: A light variation of the secondary button for dark backgrounds, adding the class `mzp-t-dark` (the button itself is light).
     context:
       class: 'mzp-t-secondary mzp-t-dark'
       label: Secondary Button
   - name: Product
+    link: './button'
     notes: Use this theme style for product-related transactions, such as downloading software or creating an account.
     context:
       class: 'mzp-t-product'
       label: Download Firefox
   - name: Product Secondary
+    link: './button'
     notes: This secondary product button theme should be used when the CTA is a product-related transaction, but not the main action a person should take on a page.
     context:
       class: 'mzp-t-product mzp-t-secondary'
       label: Download Firefox
   - name: Product Secondary Dark
+    link: './button'
     preview: '@preview-dark'
     notes: A light variation of the secondary product button for use on dark backgrounds. Add the class `mzp-t-dark` (the button itself is light).
     context:
       class: 'mzp-t-product mzp-t-secondary mzp-t-dark'
       label: Download Firefox
   - name: Neutral
     notes: A neutral button for less important actions.
+    link: './button'
     context:
       class: 'mzp-t-neutral'
       label: Neutral Button
   - name: Neutral Dark
     preview: '@preview-dark'
+    link: './button'
     notes: A light variation of the neutral button for use on dark backgrounds. Add the class `mzp-t-dark` (the button itself is light).
     context:
       class: 'mzp-t-neutral mzp-t-dark'