Box with text and background-contrast (light mode):

Same box in dark mode:

Please take a look at the below proposal and evaluate the viability of an algorithmic approach (Grommet) vs hard coded values.
https://www.figma.com/file/oJhw3JqMemtbwWjlLPWW5O/HPE-Typography-Styles?node-id=541%3A0

For reference, this is how the design system text sizing was initially implemented (I believe the hard coded values came from this calculation): https://github.com/grommet/hpe-design-system/pull/62/files#diff-413a4b94bc47b0c7dfac6fe49ff6d52911c1af858f97f7024220a941a2cf1c74R6

https://codesandbox.io/s/heading-level-default-evvho?file=/index.js

Figma shows that primary and secondary buttons should have bold text styling, but this is what I am seeing:

background-contrast is the correct end value, however, we may want to have this point to active-background which also resolves to background-contrast

It looks like the focus indicator for checkbox is broken on the hpe theme. It seems like it's been broken in the previous release as well.

Grommet

Grommet + HPE Theme

Hello,

I have been trying to install dependencies for grommet-site, grommet-server etc. and hitting the following error:
yarn install
error https://github.com/grommet/grommet-theme-hpe/tarball/NEXT-stable: Integrity check failed for "grommet-theme-hpe" (computed integrity doesn't match our records, got "sha512-YzByZQ+HxfaK4zMXB6BwSR+rxVKNUvAqm7pxHNWGkHHDLezD4do2YvgPjxSfofmDjnfr9aKz+2YCw2vCa9nBjA== sha1-NB+3Fp2F+FKsnvTNohXZsmS5ZxY=")

npm install:

npm ERR! code ENOPACKAGEJSON
npm ERR! package.json Non-registry package missing package.json: grommet-theme-hpe@https://github.com/grommet/grommet-theme-hpe/tarball/NEXT-stable.

I was only able to complete installation by replacing
"grommet-theme-hpe": "https://github.com/grommet/grommet-theme-hpe/tarball/NEXT-stable",
with
"grommet-theme-hpe": "^1.0.5",

Could this be related to my setup?

Matt reported that the DataTable footer now has a default background color (I believe header does as well) but body does not.

For consistency, I believe we should be setting consistent default backgrounds in the theme across header, body, footer, which then can be tailored with the background prop.

• Follow up with Matt Muggeridge with findings / decided direction.

It can be hard to tell the difference.

https://codesandbox.io/s/tender-mountain-xys64?initialpath=/Button&module=%2Fsrc%2FButton.js

Expected Behavior

Default hover and focus behavior of DataTable should still be applied when background prop is set

Actual Behavior

Unless the background value is semi-transparent, the hover/focus styling is lost.

URL, screen shot, or Codepen exhibiting the issue

https://codesandbox.io/s/zealous-sun-o6jni?file=/src/App.js

Steps to Reproduce

Tested using the HPE theme
<DataTable ... background={['background', 'background-contrast']} onClickRow={() => {}} />

Hover over a table row. The ones with background-contrast show a hover effect, but the background rows do not.
Same if you tab to table and then use up/down to navigate rows.

Removing the background prop reenables hover/focus styling

Your Environment

• Grommet version: 2.16.2 (HPE theme 2.0.2)
• Browser Name and version: Chrome latest
• Operating System and version (desktop or mobile): MacOS

Version from my machine:
node version: 15.0.1
npm version: 7.0.3
react-scripts: 4.0.2

Log:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/grommet-theme-hpe
npm ERR! grommet-theme-hpe@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

Since GreenLake uses the grommet designer heavily, it would be helpful to automatically publish to GitHub pages whenever there is a build on master.

I think this would primarily be a build script that could then be hooked in to CircleCI.

The Figma designs show a circle information icon on validation messages. This should be in the HPE theme.

Add the icon to the theme.

Also, change grommet to handle both component and element values. For example, menu.icons.down: FormDown as well as icon: <MyCustomIcon with props />.

The HPE Theme leaves users questioning whether the state is ON or OFF.

This CodeSandbox helps to make it clear: https://codesandbox.io/s/toggle-box-state-ambiguous-uqkzm

Probably the best example of addressing this is this styling:

The checkmark and cross make it abundantly clear as to which is on and off (irrespective of the colors). Can a checkmark/cross be applied to the HPE them toggle box too?

05-19 (OneSphere Catalog Study Findings) (dragged).pdf

See attached excerpt from Melissa's report

CheckBox disabled still responds to hover.

A workaround provided by Shimi addresses this...

const disabledFix = {
  extend: ({ disabled }) => css`
      ${disabled && '&:hover { background: transparent; }'}
      ${disabled && 'opacity: 0.3;'}
    `,
};

Without the Workaround

Notice the faint hoverIndicator (the mouse is positioned over the CheckBox, although you can't see that in this snip).

With the Fix

There is no response to hovering the mouse (you can't see the mouse in the snip).

See code at CodeSandbox.io

Here is a code extract that renders the page:

  const options = ["one", "two", "three"];
  ...
        <Select placeholder="Select an option" options={options} />
        <Select disabled placeholder="Select an option" options={options} />

This is only evident in the NEXT-stable. Here's an extract from my package.json:

"grommet": "https://github.com/grommet/grommet/tarball/stable",
"grommet-theme-hpe": "https://github.com/grommet/grommet-theme-hpe/tarball/NEXT-stable",

Using NEXT-stable, one of these is disabled... but they look identical:

Comparing this with the released versions, grommet-them-hpe@^1.0.5, see my CodeSandbox.io. You can clearly see the 2nd Select dropdown is disabled.

Double focus issue for formfield and select.

In the screenshot below, you can see two different focus areas. The expectation would be that there will only be one focus and it will be based on which component the user is currently using. In this case, I believe it would be the search box.

I cannot reproduce this using released versions. Relevant version information from my package.json:

    "grommet": "https://github.com/grommet/grommet/tarball/stable",
    "grommet-icons": "^4.4.0",
    "grommet-theme-hpe": "https://github.com/grommet/grommet-theme-hpe/tarball/NEXT-stable",

<Button disabled hoverIndicator label="Hover over me" />

When a disable Button has hoverIndicator, it still responds to mouse over.

I wonder if the grommet-theme-hpe, (or maybe grommet), should check for disabled and also remove the hover attribute?

My thought here is that when a disabled Button reacts to mouse movement, it feels like the Button is not entirely disabled... it encourages me to click on it. Then I wonder did the click do something or not!? 🤔

Checkbox in selectable DataTable does not show focus indicator when checkbox has focus

hpe theme's checkBox > check > extend is setting box-shadow to none causing this issue.
"grommet-theme-hpe": "^2.0.0"

HPE theme 1.0.2.

See my codesandbox for an example: https://codesandbox.io/s/toggle-theme-tabs-1mb7s

HPE Theme

Default Grommet Theme

If someone needs to use this theme in a tightly controlled internal network without access to https://hpefonts.s3.amazonaws.com, it will fail to retrieve the font "woff" files. What is the recommended way to get the theme with the font files already included? We could directly add the files we want and patch the theme's index.js to point to local font files, but I'm wondering if there's a more general solution for this scenario for grommet themes in general.

grommet-theme-hpe NEXT branch for the HPE design-system theme is now ready https://github.com/grommet/grommet-theme-hpe/blob/NEXT/README.md.
Pull-Requests with theme changes and adaptation to Figma designs, will be submitted to the NEXT branch rather than the master branch to avoid backward compatibility issues on official HPE theme releases.
The branch already includes Anchor & CheckBox (not toggle) recent theme changes, so those can be removed from the local aries theme when using NEXT-stable.
Next step will be to point the design-system to
"grommet-theme-hpe": "https://github.com/grommet/grommet-theme-hpe/tarball/NEXT-stable"

Are we comfortable releasing a patch for the HPE theme which would include the items listed below?

Release Notes - DRAFT

• Fixed ButtonKind sizes to reflect desired dimensions across sizes and kinds (e.g. primary, secondary, etc.). Enables ability to accommodate proposal for a greater variety of button sizes.
• Added * (asterisk) to required FormField for clear identification and improved accessibility.
• Added intelligentRounding to Layer, allowing for layers to present flush against window edges.
• Fixed Layer default border-radius.
• Fixed Layer default elevation to be large.
• Added Card default elevation of medium.
• Added validation colors for validation-ok and validation-warning.
• Changed Heading font-color to be text-strong for greater emphasis and scan-ability.
• Changed Tab active styling to provide greater visual differentiation.
• Added Tip default styling.

I'm not sure what the official line is with MS-Edge support. The most recent version is Chromium based and should be fine. The version immediately prior to the Chromium release is:

Microsoft Edge 44.19041.1.0
Microsoft EdgeHTML 18.19041

grommet-theme-hpe uses 8-digit hex values to represent colors with alpha channel. MS-Edge (pre-Chromium) does not support that.

E.g. in grommet-theme-hpe, the color background-contrast decodes to #11111108. Using color background="background-contrast" does not work on MS-Edge.

Instead it needs something like:

background={{ color: '#111111', opacity: '0.03' }}

Since "background-contrast" is deep in the grommet-theme-hpe, it could be changed there, presumably.

PS: Thanks to Shimi for her insight into this issue.

The graph-2 color is almost undistinguishable from background-front in dark mode.
The graph-0 and graph-4 colors in dark mode are nearly identical to each other.
The graph-1 color has low contrast against background-front.

In general, in dark mode, the graph colors should be lighter because they will typically be shown against a background-front color.

Is there a plan to update this theme to use the updated HPE color palette?

This shows the disable attribute on the DropButton is not causing the button to be greyed out.

Using grommet-theme-hpe@^1.0.5:

The dropdown buttons are correctly showing greyed-out, since they are disabled.

Using the NEXT-stable branch...

    "grommet-theme-hpe": "https://github.com/grommet/grommet-theme-hpe/tarball/NEXT-stable",

Dropdown is disabled (can't be clicked) but does not show as greyed out.

$ npm install https://github.com/grommet/grommet-theme-hpe/tarball/stable
npm ERR! code ENOPACKAGEJSON
npm ERR! package.json Non-registry package missing package.json: https://github.com/grommet/grommet-theme-hpe/tarball/stable.
npm ERR! package.json npm can't find a package.json file in your current directory.

Meanwhile, replacing npm with yarn succeeds.

Currently the color of an Anchor is "text", which is black by default. This makes it hard to tell that it's a clickable link. I think changing it to "brand" which is HPE green will signify that it's clickable. Any thoughts?

I think I can send a PR for this color is desired.

When a box has a background image and has a hoverindicator set, hovering over the box causes the box background to go grey, completely losing the background image context. Ideally the hover indicator on a box would either outline the box or change the background opacity or lighten/darken the background.

Example of a box (dark mode)

Same box being hovered (dark mode)

This is just as jarring in light mode.

This follows on the work completed in grommet/hpe-design-system#1205

Figma

• Snapshot before theme changes
• Add changes to theme
• Snapshot after theme changes

The current text-xweak color isn't accessible.

Here's the text colors in action:
https://design-system.hpe.design/foundation/color#text-color-palette

Which results in: https://webaim.org/resources/contrastchecker/?fcolor=BBBBBB&bcolor=FFFFFF

It looks like the light and dark flavors might be inverted?

Upgrade to Grommet version: 2.16.3, is causing header checkbox in selectable tables not to align correctly with the body checkboxes. Also see issue #5011 filed with grommet.

Please see screen shot.

Hi,
This is a question and not an issue.

I have an app that uses the grommet-theme-hpe and when I pass colors to icons, it is being ignored in favor of #666666:

I have this problem only when using Icons directly. I can set Button color and it works fine, even on the icon that is present in the button.

Is there some setup that I am missing?

• Ideate a few other approaches
• run some A/B UserZoom tests

When I use Grommet Designer (with latest HPE theme) to create a RadioButtonGroup inside a FormField, there is no padding/margin around the RadioButtonGroup. I don't know if this is an issue with the Designer not supporting the appropriate attributes, or an issue with either FormField or RadioButtonGroup.

Use the demo branch created in #124 to categorize and summarize each icon by:

• Works well, no work needed (e.g. Add)
• Rounded linecap has no effect (e.g. Action)
• Have intermixed issues (e.g. Actions)

See #124 for background.

Summary of findings/recommendations

FYI, this was first entered in Slack: https://grommet.slack.com/archives/C04LMJWQT/p1607551560217200

For emphasis, this is not about individual buttons placed around a page, but rather just a long list of buttons, as they appear in the sidebar.

I have attached two sidebar images; the first uses plain buttons, the 2nd one uses the HPE theme.

I feel the collection of HPE themed buttons causes the sidebar to have too much visual-weight compared to the content of the page. i.e. the sidebar has become distracting, demanding attention from my eye.

I understand this is the difference between WCAG AAA pass/fail. While WCAG rating for text contrast is important, I feel it is augmented by icon usage, which reduces the reliance on text alone.

Can we 'soften' the buttons in a sidebar and still achieve a good balance with WCAG text-contrast ratings?

Subtle Sidebar (Plain Buttons)

Text contrast ratio does not pass WCAG AA.

Loud Sidebar (HPE themed Buttons)

Text cotnrast is WCAG AAA rated, though I feel it has become too loud, compared to the page content.

Provide Text color styles that are WCAG 2.1 AA compliant. Current study is being done by the HPE Design System team.

grommet/hpe-design-system#606

Unblocks #126

Unblocks grommet/grommet#4465

By @ecircenis

Moved issue from grommet/grommet#4594

We noticed working with data viz more that graph-3 is awfully close to status-warning, see screenshot.

Suggestion: Do not use yellow as a graph color at all if possible, or not any color that comes close to status colors.

Theme branch used: NEXT

The CCS designs call for SVG paths to have round end caps. See if we can make a generic change in the HPE theme that will work across all icons. I suspect some icons might need their paths to be adjusted to work with this. This issue is just to see what's possible.

I'm curious to hear the team's thoughts regarding HPE specific components being exported from the grommet theme package? Specifically, branded primary buttons. Currently V2 only allows general theming of a button which will cascade throughout various components. Without passing text to a button like <Button><Text weight="bold">my button</Text></Button> a user can't achieve properly branded HPE buttons.

A pattern we could introduce to alleviate some verbosity and ensure brand consistency across applications is -

import { BrandButton } from 'grommet-hpe-theme';

<BrandButton label="my button" />

If we agree to do this my first question is - what is the best approach for implementation? Could grommet act as a peer dependency to this library? Or would it make more sense to add a Grommet dependency / StoryBook setup to this project?

Perhaps it's best to separate this idea out to a separate project - like grommet-hpe-kit which would provide utility like -

import { theme, BrandButton } from 'grommet-hpe-kit'

Just throwing some spaghetti against the wall to see what sticks

🍝

Because most of the contrast difference between background-front and background-back in dark mode is in the blue channel, there is often no visible contrast difference when night mode is enabled and the blue channel largely disappears.

The following image is from a card grid with cards having background-front and the grid background having background-back. View this image with Night Shift / Night Light enabled at different intensities.