@patternfly/documentation-framework 6.26.0 → 6.26.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.26.2 (2025-10-08)
+
+
+### Bug Fixes
+
+* enable HC switcher, add beta label ([#4766](https://github.com/patternfly/patternfly-org/issues/4766)) ([bdcd2b8](https://github.com/patternfly/patternfly-org/commit/bdcd2b80a0939ae8362d8ebcd4d14f79ef0c1831))
+
+
+
+
+
+## 6.26.1 (2025-10-08)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 # 6.26.0 (2025-10-07)
 
 

package/components/themeSelector/themeSelector.js

@@ -10,8 +10,12 @@ import {
   ToggleGroup,
   ToggleGroupItem,
   Icon,
-  Divider
+  Divider,
+  Label,
+  Popover,
+  Button
 } from '@patternfly/react-core';
+import { HelpIcon, ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { useTheme, THEME_TYPES } from '../../hooks/useTheme';
 
 const SunIcon = (
@@ -45,6 +49,47 @@ const DesktopIcon = (
   </svg>
 );
 
+const ColorSchemeGroupLabel = () => {
+  return (
+    <div className="pf-v6-c-menu__group-title" id="theme-selector-color-scheme-title">
+      Color scheme
+    </div>
+  );
+};
+
+const HighContrastGroupLabel = () => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <div className="pf-v6-c-menu__group-title">
+      High contrast{' '}
+      <Popover
+        onClick={(e) => e.stopPropagation()}
+        headerContent={"Under development"}
+        headerComponent="h1"
+        bodyContent={
+          "We are still working to add high contrast support across all PatternFly components and extensions. This beta allows you to preview our progress."
+        }
+        footerContent={
+          <Button icon={<ExternalLinkAltIcon />} component="a" isInline variant="link" href="/design-foundations/theming" target="_blank">
+            Learn more
+          </Button>
+        }
+        aria-label="More info about high contrast"
+        appendTo={() => document.body}
+      >
+        <Button
+          variant="plain"
+          hasNoPadding
+          icon={<HelpIcon />}
+          aria-label="High contrast help"
+        />
+      </Popover>{' '}&nbsp;
+      <Label color="blue" isCompact>Beta</Label>
+    </div>
+  )
+};
+
 export const ThemeSelector = ({ id }) => {
   const { mode: themeMode, setMode: setThemeMode, modes: colorModes } = useTheme(THEME_TYPES.COLOR);
   const {
@@ -109,8 +154,8 @@ export const ThemeSelector = ({ id }) => {
         preventOverflow: true
       }}
     >
-      <SelectGroup>
-        <SelectList aria-label="Light/Dark theme switcher">
+      <SelectGroup label={ColorSchemeGroupLabel}>
+        <SelectList aria-labelledby="theme-selector-color-scheme-title">
           <SelectOption value={colorModes.SYSTEM} icon={DesktopIcon} description="Follow system preference">
             System
           </SelectOption>
@@ -124,7 +169,7 @@ export const ThemeSelector = ({ id }) => {
       </SelectGroup>
       {process.env.hasHighContrastSwitcher && (<>
       <Divider />
-      <SelectGroup label="High Contrast">
+      <SelectGroup label={HighContrastGroupLabel}>
         <MenuSearch>
           <MenuSearchInput>
             <ToggleGroup aria-label="High contrast theme switcher">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.26.0",
+  "version": "6.26.2",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -12,7 +12,7 @@
     "@babel/preset-env": "7.27.1",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.285",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.287",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "10.4.19",
     "babel-loader": "^9.1.3",
@@ -95,5 +95,5 @@
     "http-cache-semantics": ">=4.1.1",
     "nanoid": "3.3.8"
   },
-  "gitHead": "eed961ba9908bc0b736c19f5bab18dba6148640e"
+  "gitHead": "46716c44750c4ced29c0f727c64849eb009e81de"
 }

package/templates/html.ejs

@@ -1,6 +1,19 @@
 <!DOCTYPE html>
 <html lang="en-US">
   <head>
+    <script>
+      {
+        try {
+          let mode = localStorage.getItem('theme-preference');
+          if (!mode || mode === 'system') {
+            mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+          }
+          if (mode === 'dark') {
+            document.documentElement.classList.add('pf-v6-theme-dark');
+          }
+        } catch (e) {}
+      }
+    </script>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
     <meta name="description" content="PatternFly is Red Hat's open source design system. It consists of components, documentation, and code for building enterprise applications at scale.">
@@ -12,6 +25,7 @@
     <link rel="manifest" href="/assets/manifest.json">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#151515">
+    <meta name="color-scheme" content="light dark">
     <meta name="application-name" content="PatternFly docs">
     <%= htmlWebpackPlugin.tags.headTags %>
   </head>