Target SharePoint environment
SharePoint Online
What SharePoint development model, framework, SDK or API is this about?
other (enter in the "Additional environment details" area below)
Developer environment
None
What browser(s) / client(s) have you tested
Additional environment details
No response
Describe the bug / error
The theme provided by SharePoint seems to be wrong implemented in any environment. The color slots on 'strong' section background do not match the inverted color values, by any design definition. It seems like they have been manually adjusted by a designer or via code on how SharePoint render the color values.
This screenshot shows the colors returned by SPFx
The strong background design is flattened out, and the primary theme should be shifted from dark to light and not nullified by different shades of white. On a closer look, there are more issues with the design visible.
The Theme Designer, in case of a background shading none - Match the theme definition.
An inverted theme should look like this:
Sadly this does not match the color values provided by SharePoint. For a strong-colored section, this should match the color above.
With its multiple limitations, Fluent UI does not correctly respect and translate the colour information to a dark or inverted theme. The design tokens currently provided in SharePoint do not translate well in the case of accessibility and the case design.
While in three out of four cases, the handling of themes works well, in the case of a strong theme, where a true invention of colors should happen, this is not the case here.
This means the "Strong" design should not be recommended to users because they completely break the user experience and flatten out the design.
A complete match between the system token and 'none' and 'strong' tokens is missing - not like presented here - https://m3.material.io/styles/color/the-color-system/tokens
While it could be an SPFx issue on not properly converting the theme based on the given information of:
- Primary Text
- Text Color
- Background Color
It is more likely from a design perspective that the theme variants haven't been overlooked correctly or guided by the developers. I am certain this issue will not be fixed in the short term.
Fluent UI React 9 hast different design errors like this too.
Steps to reproduce
Compare Design between none vs strong.
Expected behavior
Good well, crafted design palettes for 'none' and 'strong'. The design token provided by Fluent UI 9 document internal implementations but are no use for any developer and should not be used.
Target SharePoint environment
SharePoint Online
What SharePoint development model, framework, SDK or API is this about?
other (enter in the "Additional environment details" area below)
Developer environment
None
What browser(s) / client(s) have you tested
Additional environment details
No response
Describe the bug / error
The theme provided by SharePoint seems to be wrong implemented in any environment. The color slots on 'strong' section background do not match the inverted color values, by any design definition. It seems like they have been manually adjusted by a designer or via code on how SharePoint render the color values.
This screenshot shows the colors returned by SPFx
The strong background design is flattened out, and the primary theme should be shifted from dark to light and not nullified by different shades of white. On a closer look, there are more issues with the design visible.
The Theme Designer, in case of a background shading none - Match the theme definition.
An inverted theme should look like this:
Sadly this does not match the color values provided by SharePoint. For a strong-colored section, this should match the color above.
With its multiple limitations, Fluent UI does not correctly respect and translate the colour information to a dark or inverted theme. The design tokens currently provided in SharePoint do not translate well in the case of accessibility and the case design.
While in three out of four cases, the handling of themes works well, in the case of a strong theme, where a true invention of colors should happen, this is not the case here.
This means the "Strong" design should not be recommended to users because they completely break the user experience and flatten out the design.
A complete match between the system token and 'none' and 'strong' tokens is missing - not like presented here - https://m3.material.io/styles/color/the-color-system/tokens
While it could be an SPFx issue on not properly converting the theme based on the given information of:
It is more likely from a design perspective that the theme variants haven't been overlooked correctly or guided by the developers. I am certain this issue will not be fixed in the short term.
Fluent UI React 9 hast different design errors like this too.
Steps to reproduce
Compare Design between none vs strong.
Expected behavior
Good well, crafted design palettes for 'none' and 'strong'. The design token provided by Fluent UI 9 document internal implementations but are no use for any developer and should not be used.