From c25c1c423cd307d29c603a7ef87fcfe858cfcc8b Mon Sep 17 00:00:00 2001 From: mcoker Date: Thu, 3 Jul 2025 18:26:20 -0500 Subject: [PATCH 1/6] feat(theme): add high contrast theme poc --- packages/react-core/src/demos/HighContrast.md | 29 + .../examples/HighContrast/HighContrast.tsx | 391 + .../react-docs/patternfly-docs/button.css | 822 + .../react-docs/patternfly-docs/drawer.css | 854 + packages/react-docs/patternfly-docs/nav.css | 362 + packages/react-docs/patternfly-docs/page.css | 702 + .../patternfly-docs/patternfly-base.css | 8503 ++++ .../patternfly-docs/patternfly-docs.css.js | 7 + .../patternfly-docs/patternfly-variables.css | 2112 + .../react-docs/patternfly-docs/patternfly.css | 35641 ++++++++++++++++ packages/react-docs/patternfly-docs/tabs.css | 891 + 11 files changed, 50314 insertions(+) create mode 100644 packages/react-core/src/demos/HighContrast.md create mode 100644 packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx create mode 100644 packages/react-docs/patternfly-docs/button.css create mode 100644 packages/react-docs/patternfly-docs/drawer.css create mode 100644 packages/react-docs/patternfly-docs/nav.css create mode 100644 packages/react-docs/patternfly-docs/page.css create mode 100644 packages/react-docs/patternfly-docs/patternfly-base.css create mode 100644 packages/react-docs/patternfly-docs/patternfly-variables.css create mode 100644 packages/react-docs/patternfly-docs/patternfly.css create mode 100644 packages/react-docs/patternfly-docs/tabs.css diff --git a/packages/react-core/src/demos/HighContrast.md b/packages/react-core/src/demos/HighContrast.md new file mode 100644 index 00000000000..81dd5143228 --- /dev/null +++ b/packages/react-core/src/demos/HighContrast.md @@ -0,0 +1,29 @@ +--- +id: High contrast +section: patterns +--- + +import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; +import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; +import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; +import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; +import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; +import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; +import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import display from '@patternfly/react-styles/css/utilities/Display/display'; +import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; +import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; + +import MagicIcon from '@patternfly/react-icons/dist/esm/icons/magic-icon'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; +import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +### High contrast +```js file='./examples/HighContrast/HighContrast.tsx' isFullscreen + +``` diff --git a/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx new file mode 100644 index 00000000000..d878165e6ee --- /dev/null +++ b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx @@ -0,0 +1,391 @@ +import { + Alert, + PageSection, + Tabs, + Tab, + TabContent, + TabContentBody, + TabTitleText, + Title, + Content, + DrawerHead, + DrawerActions, + DrawerPanelDescription, + DrawerCloseButton, + PageSidebar, + PageSidebarBody, + Nav, + NavGroup, + NavItem, + Form, + FormGroup, + TextInput, + FormHelperText, + HelperText, + HelperTextItem, + TextArea, + Checkbox, + ActionGroup, + Button, + FormGroupLabelHelp, + Dropdown, + DropdownItem, + DropdownList, + Toolbar, + ToolbarContent, + ToolbarItem, + ToolbarGroup, + MenuToggle, + PageToggleButton, + Masthead, + MastheadMain, + MastheadToggle, + MastheadBrand, + MastheadContent, + MastheadLogo, + ButtonVariant, + DrawerPanelBody, + NotificationBadge, + NotificationBadgeVariant +} from '@patternfly/react-core'; +import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; +import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; +import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; + +export const TabsOpenDemo = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isNavOpen, setIsNavOpen] = React.useState(true); + const [isDrawerOpen, setIsDrawerOpen] = React.useState(true); + + // Toggle currently active tab + const handleTabClick = (event, tabIndex) => { + setActiveTabKey(tabIndex); + }; + + const onCloseClick = () => { + setIsDrawerOpen(false); + }; + + const [isChecked, setIsChecked] = React.useState(true); + + const pageForm = ( +
+ + + + + Valid name + + + + + + + + Invalid email + + + + } + > + + setIsChecked(!isChecked)} + /> + + + } + > +