Refactor button styles

package.json

@@ -26,7 +26,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.3.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@openstax/experiments": "^1.0.2",
-        "@openstax/flex-page-renderer": "https://github.com/openstax/flex-pages.git#renderer-1.1.0",
+        "@openstax/flex-page-renderer": "https://github.com/openstax/flex-pages.git#renderer-1.1.4",
         "@sentry/integrations": "^7.114.0",
         "@sentry/react": "^9.16.1",
         "@types/react-modal": "^3.16.3",
@@ -91,7 +91,7 @@
         "node-localstorage": "^2.2.1",
         "node-sass": "^8.0.0",
         "particles.js": "^2.0.0",
-        "pattern-library": "openstax/pattern-library",
+        "pattern-library": "openstax/pattern-library#semver:^1.5.0",
         "preact": "~10.24",
         "prettier": "^3",
         "react-modal": "^3.16.1",

src/app/components/book-selector/book-selector.scss

@@ -73,6 +73,8 @@
         overflow: hidden;
 
         .subject-toggle {
+            @include button-reset();
+
             align-items: center;
             background: none;
             border: 0;

src/app/components/carousel/carousel.scss

@@ -7,12 +7,18 @@
     max-width: calc(100vw - 3rem);
 
     .frame-changer {
+        @include button-reset();
+
         align-items: center;
         background-color: rgba(ui-color(black), 0.4);
+        color: ui-color(white);
         display: flex;
+        font-size: inherit;
+        font-weight: 500;
         height: 7rem;
         justify-content: center;
         min-width: 4rem;
+        padding: 1rem;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);

src/app/components/dialog/dialog.scss

@@ -51,6 +51,8 @@ dialog,
 
     .put-away {
         @include body-font(3.6rem);
+        @include button-reset();
+
         background-color: transparent;
         border: 0;
         box-shadow: none;

src/app/components/jsx-helpers/raw-html.scss

@@ -0,0 +1,41 @@
+@import 'pattern-library/core/pattern-library/headers';
+
+// Styles for CMS-authored markup rendered by the adjacent <RawHTML> component,
+// whose container is tagged `.cms-content`. Buttons authored in CMS rich-text
+// render through it. The base button plus the variant classes editors use
+// (`btn-orange`, `cta`, `btn-cyan`, `btn-gold`, `btn-large`) are built from the
+// pattern-library button mixins and scoped to that container, so they apply
+// only to editor content and never globally.
+.cms-content {
+    button,
+    .btn {
+        @include button();
+    }
+
+    .btn-large {
+        padding: 2.5rem;
+    }
+
+    // Call-to-action buttons generally have this style
+    .cta > .btn {
+        padding: 1.5rem 2rem;
+        text-transform: uppercase;
+    }
+
+    .cta > .btn,
+    .btn-orange {
+        @include button-type-specific(primary);
+    }
+
+    .btn-cyan {
+        background-color: os-color(light-blue);
+        border: 0;
+        color: ui-color(white);
+    }
+
+    .btn-gold {
+        background-color: os-color(gold);
+        border: 0;
+        color: ui-color(white);
+    }
+}

src/app/components/jsx-helpers/raw-html.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import cn from 'classnames';
 import usePortalContext from '~/contexts/portal';
+import './raw-html.scss';
 
 // Making scripts work, per https://stackoverflow.com/a/47614491/392102
 function activateScripts(el: HTMLElement) {
@@ -45,6 +47,7 @@ export default function RawHTML({
     Tag = 'div',
     html = '',
     embed = false,
+    className,
     ...otherProps
 }: RawHTMLArgs) {
     const ref = React.useRef<HTMLElement>();
@@ -60,6 +63,9 @@ export default function RawHTML({
     return React.createElement(Tag, {
         ref,
         dangerouslySetInnerHTML: {__html: html},
-        ...otherProps
+        ...otherProps,
+        // Tag all CMS-authored markup with `cms-content` so styles for editor
+        // content (e.g. buttons) can target it specifically.
+        className: cn('cms-content', className)
     });
 }

src/app/components/more-fewer/more-fewer.scss

@@ -5,6 +5,8 @@
     grid-row-gap: 2rem;
 
     [role="button"] {
+        @include focus-indicator();
+
         cursor: pointer;
     }
 

src/app/components/multiselect/book-tags/book-tags.scss

@@ -30,6 +30,8 @@
         padding: 0 1rem;
 
         .put-away {
+            @include button-reset();
+
             font-size: inherit;
         }
     }

src/app/components/search-bar/search-bar.scss

@@ -41,6 +41,8 @@
         }
 
         .clear-search {
+            @include button-reset();
+
             grid-column: 1;
             grid-row: 1;
             justify-self: end;
@@ -57,7 +59,7 @@
         width: 100%;
 
         &:focus-within {
-            outline: 0.2 solid ui-color(focus-outline);
+            @include focus-style();
         }
 
         .floating-label {

src/app/components/student-form/student-form.scss

@@ -6,6 +6,7 @@
 
     .cta .btn {
         @include button();
+        @include button-type-specific(primary);
         margin: 2rem auto;
         text-transform: none;
     }

src/app/layouts/default/header/menus/main-menu/dropdown/dropdown.scss

@@ -38,6 +38,11 @@
 .dropdown {
     position: relative;
 
+    // The dropdown toggle is an `<a role="button">`, so it carries the ring itself.
+    > a[role="button"] {
+        @include focus-indicator();
+    }
+
     // Keeps rightmost menu from hanging off the screen
     &.rightmost .dropdown-container {
         right: -1rem;

src/app/layouts/default/header/menus/menu-expander/menu-expander.scss

@@ -34,11 +34,7 @@ $button-size: 1.6rem;
         top: 0;
     }
 
-    &:hover,
-    &:focus,
-    &:active {
-        outline: none;
-    }
+    @include button-reset();
 
     span {
         // create middle line

src/app/layouts/default/header/sticky-note/sticky-note.scss

@@ -51,6 +51,8 @@
         }
 
         .put-away {
+            @include button-reset();
+
             align-items: center;
             align-self: flex-end;
             display: flex;

src/app/layouts/default/shared.scss

@@ -3,6 +3,7 @@
 #lower-sticky-note .put-away,
 #microsurvey .put-away {
     @include body-font(1.4rem);
+    @include button-reset();
 
     background-color: rgba(ui-color(black), 0.56);
     border-radius: 0.3rem;

src/app/layouts/landing/footer/flex.scss

@@ -73,6 +73,8 @@
             }
 
             button {
+                @include button-reset();
+
                 background-color: transparent;
                 color: inherit;
                 display: inline;

src/app/pages/ally-logos/ally-logos.scss

@@ -36,6 +36,10 @@
         .url {
             padding: 0.5rem 0 0.5rem 1rem;
         }
+
+        button {
+            @include button-reset();
+        }
     }
 
     .boxed.smaller-icon img {

src/app/pages/assignable/sections/cta/cta.scss

@@ -29,4 +29,10 @@
     .primary {
         @extend %primary;
     }
+
+    // CTA buttons are large and uppercased.
+    .btn {
+        padding: 1.5rem 2rem;
+        text-transform: uppercase;
+    }
 }

src/app/pages/details/common/get-this-title-files/get-this-title.scss

@@ -72,6 +72,10 @@
         }
     }
 
+    .show-toc {
+        @include focus-indicator();
+    }
+
     .options {
         display: flex;
         flex-direction: column;

src/app/pages/details/common/get-this-title-files/recommended-callout/recommended-callout.scss

@@ -50,6 +50,8 @@ $extra-dark-mask: rgba(0, 0, 0, 0.4);
         }
 
         .put-away {
+            @include button-reset();
+
             background-color: text-color(link);
             background-blend-mode: multiply;
             background-image: linear-gradient(to bottom, $darkening-mask, $darkening-mask);

src/app/pages/details/details.scss

@@ -91,6 +91,8 @@ $gradient-sequence: ui-color(white), ui-color(white) 50%, transparent;
             }
 
             .close-toc {
+                @include focus-indicator();
+
                 align-items: center;
                 border-radius: 50%;
                 cursor: pointer;

src/app/pages/errata-form/form/FileUploader.scss

@@ -1,3 +1,4 @@
+
 @mixin file-button() {
     align-items: center;
     display: grid;
@@ -13,6 +14,8 @@
     }
 
     .clear-file {
+        @include button-reset();
+
         appearance: none;
         background-color: inherit;
         color: inherit;

src/app/pages/k12/k12-main/testimonial.scss

@@ -97,6 +97,8 @@
         padding: 5rem $normal-margin 7rem;
 
         button {
+            @include button-reset();
+
             appearance: auto;
             background-color: ui-color(white);
             width: 1rem;

src/app/pages/partners/active-filters/active-filters.scss

@@ -43,6 +43,8 @@
             }
 
             button {
+                @include button-reset();
+
                 appearance: none;
                 background-color: transparent;
                 color: text-color(normal);

src/app/pages/partners/mobile-controls/mobile-controls.scss

@@ -35,6 +35,8 @@
         top: 0;
 
         .put-away {
+            @include button-reset();
+
             font-size: 3rem;
             font-weight: normal;
             transform: translateY(-0.5rem);

src/app/pages/partners/partners.scss

@@ -28,6 +28,8 @@
             }
 
             .put-away {
+                @include button-reset();
+
                 background-color: inherit;
                 color: inherit;
                 margin-left: $normal-margin;

src/app/pages/research/components/members.tsx

@@ -103,9 +103,9 @@ export const MembersSection = ({
                             />
                         ))}
                     </MemberGrid>
-                    <p
-                        className="py-4 mobile-only"
-                        role="button"
+                    <button
+                        type="button"
+                        className="mobile-only view-all-toggle"
                         aria-expanded={viewAll}
                         aria-controls="member-grid"
                         onClick={() => {
@@ -115,17 +115,15 @@ export const MembersSection = ({
                             setViewAll(!viewAll);
                         }}
                         css={{
-                            cursor: 'pointer',
-                            color: colors.linkText,
-                            textAlign: 'center'
+                            color: colors.linkText
                         }}
                     >
                         <FontAwesomeIcon
                             icon={viewAll ? faChevronUp : faChevronDown}
                         ></FontAwesomeIcon>
                         &nbsp;
                         {viewAll ? 'View Less' : 'View All Current Members'}
-                    </p>
+                    </button>
                 </div>
                 {/* @ts-expect-error-next-line label is not a known attribute */}
                 <div label="Collaborating Researchers">

src/app/pages/research/components/publications.tsx

@@ -45,19 +45,18 @@ export const Publications = ({
                 {publicationList.map((publication, index) => (
                     <PublicationItem key={index} publication={publication} />
                 ))}
-                <span
-                    role="button"
+                <button
+                    type="button"
                     aria-expanded={viewAll}
                     aria-controls="publication-list"
-                    className="py-4"
+                    className="view-all-toggle"
                     onClick={() => {
                         if (viewAll) {
                             scrollToPublications();
                         }
                         setViewAll(!viewAll);
                     }}
                     css={{
-                        cursor: 'pointer',
                         color: colors.linkText,
                         alignSelf: 'center'
                     }}
@@ -67,7 +66,7 @@ export const Publications = ({
                     />
                     &nbsp;
                     {viewAll ? 'View Less' : 'View All Publications'}
-                </span>
+                </button>
             </Box>
         </Section>
     );