[WNMGDS-2160] Consolidate docs theme

packages/docs/content/components/alert.mdx

@@ -340,7 +340,10 @@ This component has analytics tracking available. Please see our developer docume
 <SeeStorybookForGuidance tech="wc" storyId={'web-components-alert--docs'} />
 
 <Accordion className="ds-u-margin-top--2">
-  <AccordionItem heading="CSS variable overrides to customize this component">
+  <AccordionItem
+    heading="CSS variable overrides to customize this component"
+    contentClassName="ds-u-padding--0"
+  >
     <ComponentThemeOptions componentname="alert" />
   </AccordionItem>
 </Accordion>

packages/docs/content/layouts/Healthcare/one-col-page-layout.stories.tsx

@@ -13,7 +13,7 @@ export const OneColumnPageLayout = () => {
   return (
     <>
       <Header />
-      <main className="ds-base ds-l-container example-grid">
+      <main className="ds-l-container example-grid">
         <div className="ds-l-row">
           <div className="ds-l-col--12">
             <b>Page header</b>

packages/docs/content/utilities/font/font-family.mdx

@@ -2,23 +2,37 @@
 title: Font Family
 ---
 
-Change an element's typeface to either the sans-serif (Open Sans) or serif (Bitter) family using the font family utility.
+Change an element's typeface using a font family utility.
 
-**Format**: `.ds-u-[serif|sans]`
+**Format**: `.ds-u-sans`
 
 <EmbeddedExample>
   <section class="example-list">
     <article>
       <code class="ds-u-margin-bottom--1">.ds-u-sans</code>
-      <p class="ds-u-sans ds-title">Open Sans, Helvetica, sans-serif</p>
-    </article>
-    <article>
-      <code class="ds-u-margin-bottom--1">.ds-u-serif</code>
-      <p class="ds-u-serif ds-title">Bitter, Georgia, serif</p>
+      <p class="ds-u-sans ds-u-font-size--4xl ds-u-margin-y--0">
+        The quick brown fox jumps over the lazy dog
+      </p>
     </article>
   </section>
 </EmbeddedExample>
 
+<ThemeContent neverThemes={['medicare']}>
+
+**Format**: `.ds-u-serif`
+
+  <EmbeddedExample>
+    <section class="example-list">
+      <article>
+        <code class="ds-u-margin-bottom--1">.ds-u-serif</code>
+        <p class="ds-u-serif ds-u-font-size--4xl ds-u-margin-y--0">
+          The quick brown fox jumps over the lazy dog
+        </p>
+      </article>
+    </section>
+  </EmbeddedExample>
+</ThemeContent>
+
 ## Guidance
 
 ### Style customization

packages/docs/src/components/content/AccordionItem.tsx

@@ -0,0 +1,9 @@
+import { AccordionItem, MinusCircleIcon, PlusCircleIcon } from '@cmsgov/design-system';
+
+AccordionItem.defaultProps = {
+  ...AccordionItem.defaultProps,
+  closeIconComponent: MinusCircleIcon,
+  openIconComponent: PlusCircleIcon,
+};
+
+export default AccordionItem;

packages/docs/src/components/content/MaturityChecklist/MaturityChecklist.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import MaturityChecklistItem, { CheckStatus } from './MaturityChecklistItem';
-import { Accordion, AccordionItem, SvgIcon } from '@cmsgov/design-system';
+import { Accordion, SvgIcon } from '@cmsgov/design-system';
+import AccordionItem from '../AccordionItem';
 
 interface MaturityChecklistProps {
   children: string;
@@ -150,74 +151,80 @@ const MaturityChecklist = (props: MaturityChecklistProps) => {
 
   return (
     <section className="c-maturity-checklist">
-      {props.children}
-
-      <div className="c-maturity-checklist__progress">
-        {progress() === 100 ? (
-          <SvgIcon ariaHidden title="" viewBox="0 0 24 24" className="ds-u-color--success">
-            <path
-              fillRule="nonzero"
-              d="m11.428 15.928c-0.51094 0.51094-1.3453 0.51094-1.8562 0l-3-3c-0.51094-0.51094-0.51094-1.3453 0-1.8562s1.3453-0.51094 1.8562 0l2.0719 2.0719 5.0719-5.0719c0.51094-0.51094 1.3453-0.51094 1.8562 0s0.51094 1.3453 0 1.8562l-6 6zm12.572-3.9281c0 6.6281-5.3719 12-12 12s-12-5.3719-12-12 5.3719-12 12-12 12 5.3719 12 12zm-12-9.75c-5.3859 0-9.75 4.3641-9.75 9.75s4.3641 9.75 9.75 9.75 9.75-4.3641 9.75-9.75-4.3641-9.75-9.75-9.75z"
-            />
-          </SvgIcon>
-        ) : (
-          <SvgIcon ariaHidden title="" viewBox="0 0 24 24" className="ds-u-color--error">
-            <path
-              fillRule="nonzero"
-              d="m24 12c0 6.6281-5.3719 12-12 12s-12-5.3719-12-12 5.3719-12 12-12 12 5.3719 12 12zm-12-9.75c-5.3859 0-9.75 4.3641-9.75 9.75s4.3641 9.75 9.75 9.75 9.75-4.3641 9.75-9.75-4.3641-9.75-9.75-9.75z"
-            />
-          </SvgIcon>
+      <div className="ds-u-measure--wide">
+        {props.children}
+
+        <div className="c-maturity-checklist__progress">
+          {progress() === 100 ? (
+            <SvgIcon ariaHidden title="" viewBox="0 0 24 24" className="ds-u-color--success">
+              <path
+                fillRule="nonzero"
+                d="m11.428 15.928c-0.51094 0.51094-1.3453 0.51094-1.8562 0l-3-3c-0.51094-0.51094-0.51094-1.3453 0-1.8562s1.3453-0.51094 1.8562 0l2.0719 2.0719 5.0719-5.0719c0.51094-0.51094 1.3453-0.51094 1.8562 0s0.51094 1.3453 0 1.8562l-6 6zm12.572-3.9281c0 6.6281-5.3719 12-12 12s-12-5.3719-12-12 5.3719-12 12-12 12 5.3719 12 12zm-12-9.75c-5.3859 0-9.75 4.3641-9.75 9.75s4.3641 9.75 9.75 9.75 9.75-4.3641 9.75-9.75-4.3641-9.75-9.75-9.75z"
+              />
+            </SvgIcon>
+          ) : (
+            <SvgIcon ariaHidden title="" viewBox="0 0 24 24" className="ds-u-color--error">
+              <path
+                fillRule="nonzero"
+                d="m24 12c0 6.6281-5.3719 12-12 12s-12-5.3719-12-12 5.3719-12 12-12 12 5.3719 12 12zm-12-9.75c-5.3859 0-9.75 4.3641-9.75 9.75s4.3641 9.75 9.75 9.75 9.75-4.3641 9.75-9.75-4.3641-9.75-9.75-9.75z"
+              />
+            </SvgIcon>
+          )}
+          <p>This component meets {progress()}% of our maturity criteria.</p>
+        </div>
+
+        {progress() !== 100 && (
+          <div className="c-maturity-checklist__incomplete-items">
+            <>
+              <h3>Incomplete criteria</h3>
+              <ul role="list" className="c-maturity-checklist__list">
+                {incompleteCriteria}
+              </ul>
+            </>
+          </div>
         )}
-        <p>This component meets {progress()}% of our maturity criteria.</p>
-      </div>
 
-      {progress() !== 100 && (
-        <div className="c-maturity-checklist__incomplete-items">
-          <>
-            <h3>Incomplete criteria</h3>
-            <ul role="list" className="c-maturity-checklist__list">
-              {incompleteCriteria}
-            </ul>
-          </>
+        <div className="c-maturity-checklist__what-is-it">
+          <h3>What does this mean?</h3>
+
+          <p>
+            Each component is tested against the following items to gauge the component&apos;s
+            maturity. When using incomplete components, consider the unmet criteria as applied to
+            your product.
+          </p>
+
+          <p>
+            For more information about how we tested and validated our work for each checklist item,{' '}
+            <a href="https://github.com/CMSgov/design-system/blob/main/COMPONENT_MATURITY.md">
+              read our component maturity documentation
+            </a>
+            .
+          </p>
         </div>
-      )}
-
-      <div className="c-maturity-checklist__what-is-it">
-        <h3>What does this mean?</h3>
-
-        <p>
-          Each component is tested against the following items to gauge the component&apos;s
-          maturity. When using incomplete components, consider the unmet criteria as applied to your
-          product.
-        </p>
-
-        <p>
-          For more information about how we tested and validated our work for each checklist item,{' '}
-          <a href="https://github.com/CMSgov/design-system/blob/main/COMPONENT_MATURITY.md">
-            read our component maturity documentation
-          </a>
-          .
-        </p>
-      </div>
 
-      <Accordion className="ds-u-margin-top--4">
-        <AccordionItem heading="View complete criteria" contentClassName="ds-u-padding--0">
-          {criteria.map((criterion) => {
-            return (
-              <ul role="list" key={criterion.title} className="c-maturity-checklist__list">
-                <h3>{criterion.title}</h3>
-                {criterion.items.map((item) => {
-                  return (
-                    <MaturityChecklistItem key={item.title} title={item.title} status={item.status}>
-                      {item.description}
-                    </MaturityChecklistItem>
-                  );
-                })}
-              </ul>
-            );
-          })}
-        </AccordionItem>
-      </Accordion>
+        <Accordion className="ds-u-margin-top--4">
+          <AccordionItem heading="View complete criteria" contentClassName="ds-u-padding--0">
+            {criteria.map((criterion) => {
+              return (
+                <ul role="list" key={criterion.title} className="c-maturity-checklist__list">
+                  <h3>{criterion.title}</h3>
+                  {criterion.items.map((item) => {
+                    return (
+                      <MaturityChecklistItem
+                        key={item.title}
+                        title={item.title}
+                        status={item.status}
+                      >
+                        {item.description}
+                      </MaturityChecklistItem>
+                    );
+                  })}
+                </ul>
+              );
+            })}
+          </AccordionItem>
+        </Accordion>
+      </div>
     </section>
   );
 };

packages/docs/src/components/layout/Layout.tsx

@@ -73,7 +73,7 @@ const Layout = ({
   const pageId = slug ? `page--${slug.replace('/', '_')}` : null;
 
   return (
-    <div className="ds-base" data-theme={theme} id={pageId}>
+    <div id={pageId}>
       <Helmet
         title={tabTitle}
         htmlAttributes={{
@@ -86,7 +86,7 @@ const Layout = ({
           rel="stylesheet"
           type="text/css"
           title="docThemeCss"
-          href={withPrefix(`themes/${theme}-theme.css`)}
+          href={withPrefix(`themes/core-theme.css`)}
         />
       </Helmet>
       <SkipNav href="#main" />

packages/docs/src/components/layout/TableOfContentsMobile.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Accordion, AccordionItem } from '@cmsgov/design-system';
+import { Accordion } from '@cmsgov/design-system';
+import AccordionItem from '../content/AccordionItem';
 import {
   TableOfContentsFeedback,
   TableOfContentsProps,
@@ -13,7 +14,7 @@ const TableOfContentsMobile = ({ items, slug }: TableOfContentsProps) => {
   return items.length ? (
     <Accordion className="c-table-of-contents-mobile">
       <AccordionItem heading="On this page">
-        <TableOfContentsList items={items} level={1} className="c-table-of-contents-mobile__list" />
+        <TableOfContentsList items={items} className="c-table-of-contents-mobile__list" />
         <TableOfContentsFeedback slug={slug} />
       </AccordionItem>
     </Accordion>

packages/docs/src/styles/components/accordionOverride.scss

@@ -0,0 +1,75 @@
+// Docs site uses core theme, but wants healthcare Accordion style overrides
+// SCSS file includes logic, but lacks variable values
+.ds-c-accordion {
+  // Need to locally define variable values because Hgov variables are no longer being imported into the docs site
+  --accordion__background-color: #ffffff00;
+  --accordion-button__color: #0071bc;
+  --accordion-content__background-color: #ffffff00;
+  --accordion-icon__size: 0.875rem;
+
+  .ds-c-accordion__button {
+    background-color: var(--accordion__background-color);
+    color: var(--accordion-button__color);
+    column-gap: $spacer-1;
+    flex-direction: row-reverse;
+    font-weight: var(--font-weight-normal);
+    justify-content: flex-end;
+    padding: $spacer-1 0 $spacer-1 0;
+
+    &:hover {
+      --ds-c-accordion__button__color: var(--color-primary-darker);
+      text-decoration: underline;
+
+      .ds-c-icon--minus-circle__circle,
+      .ds-c-icon--plus-circle__circle {
+        fill: currentColor;
+      }
+
+      .ds-c-icon--minus-circle__group,
+      .ds-c-icon--plus-circle__group {
+        fill: var(--color-white);
+      }
+    }
+
+    @media (forced-colors: active) {
+      background-color: LinkText;
+      color: window;
+      forced-color-adjust: none;
+      -ms-high-contrast-adjust: none;
+
+      &:hover,
+      &:focus {
+        background-color: window;
+        color: LinkText;
+        forced-color-adjust: none;
+        -ms-high-contrast-adjust: none;
+        outline: $spacer-half solid LinkText;
+        outline-offset: calc(-1 * #{$spacer-half});
+
+        .ds-c-icon--plus-circle__circle,
+        .ds-c-icon--minus-circle__circle {
+          fill: Window;
+          stroke: WindowText;
+        }
+
+        .ds-c-icon--plus-circle__group,
+        .ds-c-icon--minus-circle__group {
+          fill: WindowText;
+        }
+      }
+    }
+  }
+
+  > .ds-c-icon {
+    align-self: center;
+
+    // This variable only exists for the Healthcare Accordion CSS override
+    // We need to create tokens specific to icon sizing instead of repurposing spacer-* or font-size-* tokens
+    font-size: var(--accordion-icon__size);
+  }
+
+  .ds-c-accordion__content {
+    background-color: var(--accordion-content__background-color);
+    padding: $spacer-1 $spacer-2 $spacer-1 $spacer-5;
+  }
+}

packages/docs/src/styles/index.scss

@@ -1,6 +1,3 @@
-// including medicare fonts in build for use with medicare theme
-@import '@cmsgov/ds-medicare-gov/src/styles/fonts';
-
 // @styles is aliased in gatsby-node.js
 @import '@styles/layout';
 @import '@styles/index.scss';
@@ -9,6 +6,7 @@
 @import 'pages/layout.scss';
 @import 'pages/search.scss';
 
+@import 'components/accordionOverride.scss';
 @import 'components/buttonMigrationTable.scss';
 @import 'components/buttonVariationsTable.scss';
 @import 'components/codeSnippet.scss';
@@ -30,11 +28,3 @@
 @import 'components/tableOfContents.scss';
 @import 'components/spacingUtilityExampleList.scss';
 @import 'components/video.scss';
-
-[data-theme='healthcare'] {
-  @import '@cmsgov/ds-healthcare-gov/src/styles/components/index';
-}
-
-[data-theme='medicare'] {
-  @import '@cmsgov/ds-medicare-gov/src/styles/components/index';
-}