Docs homepage rework, colors guideline + misc fixes #494
Conversation
snide
added
the
documentation
snide
changed the title
|
OK. Think this one should be good to go. No hurry, but if you have time @cchaos to spin this up and just do a visual check I'd appreciate it. Based on the accessibility values I was seeing from the tests, I had to bump up the contrast on |
src-docs/src/views/home/home_view.js
Outdated
| image="https://i.imgur.com/UfigGiQ.png" | ||
| title="Tables" | ||
| isClickable | ||
| description="Example of a card's description. Stick to one or two sentences." |
There was a problem hiding this comment.
Still using placeholder text here.
src-docs/src/views/home/home_view.js
Outdated
| the <a href="https://www.elastic.co/guide/en/kibana/current/kibana-plugins.html">plugin-specific section</a> for | ||
| help developing Kibana plugins. You can find the source for the <a href="https://github.com/elastic/eui">Elastic UI Framework on GitHub</a>. | ||
| The Elastic UI framework (EUI) is a design library in use at Elastic to | ||
| build internal products that need to share our branding and look and |
There was a problem hiding this comment.
Change "branding and aesthetics"
| </Link> | ||
| </EuiFlexItem> | ||
| <EuiFlexItem> | ||
| <Link to="/navigation/button"> |
There was a problem hiding this comment.
Should we link them to the buttons guidelines page instead?
There was a problem hiding this comment.
I think people will want the code first? I'd want the code first? haha. I dunno. I'll leave it for now and we can change as we see what people want.
| $euiColorAccent: #DD0A73 !default; | ||
| $euiColorHighlight: #FFFBF1 !default; | ||
| $euiColorGhost: #FFF !default; | ||
|
|
||
| // Status | ||
| $euiColorSuccess: $euiColorSecondary !default; | ||
| $euiColorDanger: #A30000 !default; | ||
| $euiColorWarning: #E5830E !default; | ||
| $euiColorWarning: #C34A1E !default; |
There was a problem hiding this comment.
What do you think about #D43900 instead? It's just slightly more saturated than what you have here and I think helps to separate it a bit more from the danger color.
There was a problem hiding this comment.
I had to darken your color by a smidge to get it to pass AA on euiColorLightestShade. I'm using that as our minimum contrast color combo because it normally means the color will work on things like callouts as well.
There was a problem hiding this comment.
Either way, feel free to adjust this once its in. I'm not super happy with some of these myself, but at least they are one-liner changes and we can test them quick.
|
@cchaos feedback addressed. I put the blockforms on sketch. Feel free to adjust them however you see fit. For some reason I had trouble exporting SVGs, but that would help them scale a little better in the page. Right now they get a bit crushed depending upon your browser window. |
Homepage + colors guideline
Colorsdoes a better job of highlighting our color accessibility.sass-vars-to-js-loaderwhich allows me to pull in sass variables as JS vars.calculateContrastreturns the contrast value of any two colors passed.rgbToHexwill convert the color system of a passedrgbavalue. This bookends nicely against our existinghexToRgbservices function.Misc fixes
EuiBadgeto be aspaninstead of adiv. This allows it to sit within paragraphs.logoGithubandlogoSketchEuiCardnow accepts ahrefprop.isClickableis now also a distinct prop in case you need to wrap using React'sLinkor have other reasons for the hover effect.EuiFlexwhere nested flexgroups wouldn't respond to theresponsive={false}prop.EuiImagedoc images with something more random / permissions friendly.Todo
Todo in a later PR