Red Hat UX
Replies: 5 comments 5 replies
-
|
NB: consensus so far is to eventually move the context code altogether into RHDS |
Beta Was this translation helpful? Give feedback.
-
|
I second this, I think we'll need it in RHDS since some of these variables will probably be different between the projects. |
Beta Was this translation helpful? Give feedback.
-
|
As a stopgap solution, we can copy those context styles into a shared constructible stylesheet object and have all our components use it |
Beta Was this translation helpful? Give feedback.
-
|
We're going to cover this in a sync meeting at some point soon, so this is a drop jumping the gun, but nonetheless writing it out helps me organize my thoughts. From where I'm sitting, it's not clear what the concept of So I'd prefer to see components use design tokens like |
Beta Was this translation helpful? Give feedback.
-
|
I'm playing with some ideas as part of @markcaron @heyMP do you think that tokens which assign a value to /* defaults */
--rh-context-dark-color-text: var(--rh-color-text-primary-on-dark, #ffffff);
--rh-context-dark-color-text-muted: var(--rh-color-text-secondary-on-dark, #aaaaaa);
--rh-context-dark-color-text-link: var(--rh-color-interactive-blue-lighter, #73bcf7);
--rh-context-dark-color-text-link-hover: var(--rh-color-interactive-blue, #0066cc);
--rh-context-dark-color-text-link-focus: var(--rh-color-interactive-blue, #0066cc);
--rh-context-dark-color-text-link-visited: var(--rh-color-interactive-blue, #0066cc);
--rh-context-light-color-text: var(--rh-color-text-primary-on-light, #151515);
--rh-context-light-color-text-muted: var(--rh-color-text-secondary-on-light, #6c6c6c);
--rh-context-light-color-text-link: var(--rh-color-interactive-blue, #0066cc);
--rh-context-light-color-text-link-hover: var(--rh-color-interactive-blue-darker, #004080);
--rh-context-light-color-text-link-focus: var(--rh-color-interactive-blue-darker, #004080);
--rh-context-light-color-text-link-visited: var(--rh-color-interactive-purple-darker, #6753ac);My working assumption is that |
Beta Was this translation helpful? Give feedback.
-
|
@coreyvickery The (partial) source for above is: context:
dark:
color:
text:
_:
type: color
value: '{color.text.primary.on.dark}'
muted:
type: color
value: '{color.surface.light}' #f0f0f0, closest to #d2d2d2 from pf
link:
_:
type: color
value: '{color.interactive.blue.lighter}'
hover:
type: color
value: '{color.interactive.blue._}'
focus:
type: color
value: '{color.interactive.blue._}'
visited:
type: color
value: '{color.interactive.blue._}'NOTE that this breaks the mold of having |
Beta Was this translation helpful? Give feedback.
-
|
Had a chat with @markcaron earlier today, when we came to some conclusions:
|
Beta Was this translation helpful? Give feedback.
-
|
@coreyvickery I want to make sure I didn't misrepresent the plan to simplify down to only 2 contexts ( @kylebuch8 tagging you for visibility on the context simplification in addition to the renaming of |
Beta Was this translation helpful? Give feedback.
-
|
@markcaron I'm not sure I can make that call, maybe we need to loop in Dan or Adam Lazarra? I say that because I think some or a lot of FTS patterns we have use teal, dark red, etc. as background colors. If we're moving away from using those, great, |
Beta Was this translation helpful? Give feedback.
-
|
Here are some example kitchen sink examples that illustrate the various color themes |
Beta Was this translation helpful? Give feedback.
-
In
rh-footerwe transitioned from PFE's color context variables (i.e. the broadcast variables) to using our ownrh-prefixed vars with design token fallbacks. This begs the question of if / how we should be tying our colors into PFE's broadcast variables at all.Example
Before
After
Results in us loosing correct styling in dark contexts:
Background
PFE relies on the following block of code to switch the color of text and links based on color context:
@patternfly/pfe-styles/pfe-context.css
Beta Was this translation helpful? Give feedback.
All reactions