From 22c5547acb728720acf3985eeca6357577f694a4 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Fri, 31 Oct 2025 11:45:54 -0400 Subject: [PATCH 1/2] docs(theming): Adds Figma guidance for using themes. --- .../styles/theming/img/components-hc.svg | 267 ++++++++++++++++++ .../styles/theming/img/figma-dark-mode.svg | 10 + .../styles/theming/img/figma-hc-mode.svg | 10 + .../styles/theming/theming.md | 22 ++ 4 files changed, 309 insertions(+) create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/components-hc.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/figma-dark-mode.svg create mode 100644 packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/figma-hc-mode.svg diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/components-hc.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/components-hc.svg new file mode 100644 index 0000000000..4accd20ecf --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/components-hc.svg @@ -0,0 +1,267 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/figma-dark-mode.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/figma-dark-mode.svg new file mode 100644 index 0000000000..3ac54da044 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/figma-dark-mode.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/figma-hc-mode.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/figma-hc-mode.svg new file mode 100644 index 0000000000..2eaf1a4ac6 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/img/figma-hc-mode.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/theming.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/theming.md index 7d29c785a1..528e199e4b 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/theming.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/theming.md @@ -54,6 +54,10 @@ In high contrast mode, distinct borders are also added to components to ensure t For development guidance, refer to the [high contrast handbook](/design-foundations/theming/high-contrast-handbook). +
+![A collage of multiple PatternFly components, like a calendar, alert, and menu. The top half of the image has components on a white background with black text and the bottom half of the image has dark components on a black background with light text. All components have high contrast, with borders and noticeable colors.](./img/components-hc.svg) +
+ ## Custom themes To branch off of our themes and create your own, you can identify the design tokens you'd like to adjust on our [all tokens page](/tokens/all-patternfly-tokens) and provide new values to use within your application. @@ -68,6 +72,24 @@ There are a couple of instances when you might want to adjust an existing Patter Our Figma libraries fully support theming. Designers can create a single layout and then use various Figma "Appearance" settings to swap a wireframe to light, dark, or high contrast mode. This makes it easy to visually test and validate designs across all supported themes. +The standard light PatternFly theme will be applied to components by default. If you want your mockups to use our dark or high contrast themes, you will eed to adjust the following settings in Figma. + +### Dark mode + +To swap your components to our standard dark mode, change the Semantic Color Tokens variable mode to be "Dark": + +
+![Figma settings menu to select different token variables.](./img/figma-dark-mode.svg) +
+ +### High contrast mode + +To swap your components to our high contrast mode, change the Semantic Dimension Tokens variable mode to be "High Contrast" and choose either "Light - High Contrast" or "Dark - High Contrast" for the Semantic Color Tokens variable mode: + +
+![Figma settings menu to select different token variables.](./img/figma-hc-mode.svg) +
+ ## Best practices To ensure your application is robust, maintainable, and adaptable across different themes, we recommend following these best practices. From 81be4638c65799cf5363abd75e024c5b8d3da4e4 Mon Sep 17 00:00:00 2001 From: Erin Donehoo <105813956+edonehoo@users.noreply.github.com> Date: Tue, 4 Nov 2025 10:56:08 -0500 Subject: [PATCH 2/2] Changes from review. --- .../content/design-guidelines/styles/theming/theming.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/theming.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/theming.md index 528e199e4b..033d29a4f8 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/theming.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/theming/theming.md @@ -70,9 +70,9 @@ There are a couple of instances when you might want to adjust an existing Patter ## Using themes in Figma -Our Figma libraries fully support theming. Designers can create a single layout and then use various Figma "Appearance" settings to swap a wireframe to light, dark, or high contrast mode. This makes it easy to visually test and validate designs across all supported themes. +Our Figma libraries fully support theming. Designers can create a single design and then swap between our themes using the "Apply Variable Mode" toggles in the "Appearance" section of the component properties panel. This makes it easy to visually test and validate designs across all supported themes. -The standard light PatternFly theme will be applied to components by default. If you want your mockups to use our dark or high contrast themes, you will eed to adjust the following settings in Figma. +The standard light PatternFly theme will be applied to components by default. If you want your mockups to use our dark or high contrast themes, you will need to adjust the following settings in Figma. ### Dark mode @@ -90,6 +90,10 @@ To swap your components to our high contrast mode, change the Semantic Dimension ![Figma settings menu to select different token variables.](./img/figma-hc-mode.svg) +### Chart themes + +Our charts use a unique token collection, so you will need to adjust chart variable modes separately from components in order to swap themes. To change the variable mode for charts, follow the same steps previously outlined for component theme adjustments. + ## Best practices To ensure your application is robust, maintainable, and adaptable across different themes, we recommend following these best practices.