Skip to content

increase the contrast of n1-level colors and fix typo #232

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jeroenransijn merged 3 commits into from
Jul 18, 2018
Merged

increase the contrast of n1-level colors and fix typo #232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d9717e
increase the contrast of n1-level colors and fix typo
mshwery Jul 18, 2018
89a4be4
wip update snap and B1 color
mshwery Jul 18, 2018
04c4272
wip. update more snaps
mshwery Jul 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/buttons/src/Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,12 @@ class Button extends PureComponent {
}

static defaultProps = {
intent: 'none',
appearance: 'default',
isActive: false,
height: 32,
paddingTop: 0,
intent: 'none',
isActive: false,
paddingBottom: 0,
intent: 'none'
paddingTop: 0
}

static styles = {
Expand Down
2 changes: 1 addition & 1 deletion src/file-picker/test/snapshots/index.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Generated by [AVA](https://ava.li).
value=""
/>
<button
className="css-19t0t8t evergreen-file-picker-button 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_32px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_0px 📦bblr_0px 📦pt_0px 📦pb_0px 📦pr_16px 📦pl_16px 📦mb_0px 📦ml_0px 📦mr_0px 📦h_32px 📦pst_relative 📦dspl_inline-flex 📦algn-itms_center 📦flx-wrap_nowrap 📦flx-srnk_0 📦box-szg_border-box"
className="css-18rijld evergreen-file-picker-button 📦fnt-fam_b77syt 📦mt_0px 📦fnt-sze_12px 📦f-wght_500 📦ln-ht_32px 📦ltr-spc_0 📦btrr_3px 📦bbrr_3px 📦btlr_0px 📦bblr_0px 📦pt_0px 📦pb_0px 📦pr_16px 📦pl_16px 📦mb_0px 📦ml_0px 📦mr_0px 📦h_32px 📦pst_relative 📦dspl_inline-flex 📦algn-itms_center 📦flx-wrap_nowrap 📦flx-srnk_0 📦box-szg_border-box"
disabled={undefined}
onClick={Function {}}
>
Expand Down
Binary file modified src/file-picker/test/snapshots/index.js.snap
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion src/menu/src/MenuItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ class MenuItem extends React.PureComponent {
onKeyPress={this.handleKeyPress}
height={icon ? 40 : 32}
tabIndex={0}
data-isselecteable="true"
data-isselectable="true"
display="flex"
alignItems="center"
{...passthroughProps}
Expand Down
2 changes: 1 addition & 1 deletion src/menu/src/MenuOption.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ class MenuOption extends React.PureComponent {
className={themedClassName}
onClick={this.handleClick}
onKeyPress={this.handleKeyPress}
data-isselecteable="true"
data-isselectable="true"
aria-checked={isSelected}
height={40}
display="flex"
Expand Down
6 changes: 3 additions & 3 deletions src/ssr/test/snapshots/extractStyles.js.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Generated by [AVA](https://ava.li).
glamorIds: [
'ng405l',
'fv6wzy',
'19t0t8t',
'18rijld',
],
uiBoxCache: [
[
Expand Down Expand Up @@ -228,11 +228,11 @@ Generated by [AVA](https://ava.li).
.📦box-szg_border-box {␊
box-sizing: border-box;␊
}␊
@-webkit-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-moz-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-o-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-webkit-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-moz-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-o-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}.css-19t0t8t,[data-css-19t0t8t]{-webkit-font-smoothing:antialiased;-webkit-appearance:none;vertical-align:middle;text-decoration:none;border:none;outline:none;cursor:pointer;color:#425A70;background-color:white;background-image:-webkit-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: -moz-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: linear-gradient(to bottom, #FFFFFF, #F4F5F7);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.06);}.css-19t0t8t::-moz-focus-inner ,[data-css-19t0t8t]::-moz-focus-inner {border:0;}.css-19t0t8t[disabled],[data-css-19t0t8t][disabled],.css-19t0t8t [data-disabled],[data-css-19t0t8t] [data-disabled]{cursor:not-allowed;opacity:0.8;background-image:none;background-color:rgba(67, 90, 111, 0.06);box-shadow:none;color:rgba(67, 90, 111, 0.7);}.css-19t0t8t:not([disabled]):not([data-disabled]):hover,[data-css-19t0t8t]:not([disabled]):not([data-disabled]):hover{background-image:-webkit-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: -moz-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: linear-gradient(to bottom, #FAFBFB, #EAECEE);}.css-19t0t8t:not([disabled]):not([data-disabled]):focus,[data-css-19t0t8t]:not([disabled]):not([data-disabled]):focus{z-index:2;box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.14);}.css-19t0t8t:not([disabled]):not([data-disabled]):active,[data-css-19t0t8t]:not([disabled]):not([data-disabled]):active, .css-19t0t8t:not([disabled]):not([data-disabled])[aria-expanded="true"], [data-css-19t0t8t]:not([disabled]):not([data-disabled])[aria-expanded="true"], .css-19t0t8t:not([disabled]):not([data-disabled])[data-active], [data-css-19t0t8t]:not([disabled]):not([data-disabled])[data-active]{background-image:none;background-color:rgba(16, 112, 202, 0.09);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}`,
@-webkit-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-moz-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-o-keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@keyframes loading_ng405l{0%{transform:rotate(0);-webkit-transform:rotate(0);}100%{transform:rotate(360deg);-webkit-transform:rotate(360deg);}}@-webkit-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-moz-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@-o-keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}@keyframes loading-circle_fv6wzy{0%{stroke-dashoffset:600;}100%{stroke-dashoffset:0;}}.css-18rijld,[data-css-18rijld]{-webkit-font-smoothing:antialiased;-webkit-appearance:none;vertical-align:middle;text-decoration:none;border:none;outline:none;cursor:pointer;color:#425A70;background-color:white;background-image:-webkit-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: -moz-linear-gradient(to bottom, #FFFFFF, #F4F5F7); background-image: linear-gradient(to bottom, #FFFFFF, #F4F5F7);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.06);}.css-18rijld::-moz-focus-inner ,[data-css-18rijld]::-moz-focus-inner {border:0;}.css-18rijld[disabled],[data-css-18rijld][disabled],.css-18rijld [data-disabled],[data-css-18rijld] [data-disabled]{cursor:not-allowed;opacity:0.8;background-image:none;background-color:rgba(67, 90, 111, 0.06);box-shadow:none;color:rgba(67, 90, 111, 0.7);}.css-18rijld:not([disabled]):not([data-disabled]):hover,[data-css-18rijld]:not([disabled]):not([data-disabled]):hover{background-image:-webkit-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: -moz-linear-gradient(to bottom, #FAFBFB, #EAECEE); background-image: linear-gradient(to bottom, #FAFBFB, #EAECEE);}.css-18rijld:not([disabled]):not([data-disabled]):focus,[data-css-18rijld]:not([disabled]):not([data-disabled]):focus{z-index:2;box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.14);}.css-18rijld:not([disabled]):not([data-disabled]):active,[data-css-18rijld]:not([disabled]):not([data-disabled]):active, .css-18rijld:not([disabled]):not([data-disabled])[aria-expanded="true"], [data-css-18rijld]:not([disabled]):not([data-disabled])[aria-expanded="true"], .css-18rijld:not([disabled]):not([data-disabled])[data-active], [data-css-18rijld]:not([disabled]):not([data-disabled])[data-active]{background-image:none;background-color:rgba(16, 112, 202, 0.09);box-shadow:inset 0 0 0 1px rgba(67, 90, 111, 0.14), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}.css-18rijld:not([disabled]):not([data-disabled]):focus:active,[data-css-18rijld]:not([disabled]):not([data-disabled]):focus:active, .css-18rijld:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, [data-css-18rijld]:not([disabled]):not([data-disabled])[aria-expanded="true"]:focus, .css-18rijld:not([disabled]):not([data-disabled])[data-active]:focus, [data-css-18rijld]:not([disabled]):not([data-disabled])[data-active]:focus{box-shadow:0 0 0 3px rgba(16, 112, 202, 0.14), inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 1px 1px 0 rgba(67, 90, 111, 0.06);}`,
hydrationScript: <script
dangerouslySetInnerHTML={
{
__html: '{"uiBoxCache":[["fontFamily\\"SF UI Text\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"","📦fnt-fam_b77syt"],["marginTop0","📦mt_0px"],["fontSize12px","📦fnt-sze_12px"],["fontWeight500","📦f-wght_500"],["lineHeight32px","📦ln-ht_32px"],["letterSpacing0","📦ltr-spc_0"],["borderTopRightRadius3","📦btrr_3px"],["borderBottomRightRadius3","📦bbrr_3px"],["borderTopLeftRadius3","📦btlr_3px"],["borderBottomLeftRadius3","📦bblr_3px"],["paddingTop0","📦pt_0px"],["paddingBottom0","📦pb_0px"],["paddingRight16","📦pr_16px"],["paddingLeft16","📦pl_16px"],["marginBottom0","📦mb_0px"],["marginLeft0","📦ml_0px"],["marginRight0","📦mr_0px"],["height32","📦h_32px"],["positionrelative","📦pst_relative"],["displayinline-flex","📦dspl_inline-flex"],["alignItemscenter","📦algn-itms_center"],["flexWrapnowrap","📦flx-wrap_nowrap"],["boxSizingborder-box","📦box-szg_border-box"]],"glamorIds":["ng405l","fv6wzy","19t0t8t"]}',
__html: '{"uiBoxCache":[["fontFamily\\"SF UI Text\\", -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"","📦fnt-fam_b77syt"],["marginTop0","📦mt_0px"],["fontSize12px","📦fnt-sze_12px"],["fontWeight500","📦f-wght_500"],["lineHeight32px","📦ln-ht_32px"],["letterSpacing0","📦ltr-spc_0"],["borderTopRightRadius3","📦btrr_3px"],["borderBottomRightRadius3","📦bbrr_3px"],["borderTopLeftRadius3","📦btlr_3px"],["borderBottomLeftRadius3","📦bblr_3px"],["paddingTop0","📦pt_0px"],["paddingBottom0","📦pb_0px"],["paddingRight16","📦pr_16px"],["paddingLeft16","📦pl_16px"],["marginBottom0","📦mb_0px"],["marginLeft0","📦ml_0px"],["marginRight0","📦mr_0px"],["height32","📦h_32px"],["positionrelative","📦pst_relative"],["displayinline-flex","📦dspl_inline-flex"],["alignItemscenter","📦algn-itms_center"],["flexWrapnowrap","📦flx-wrap_nowrap"],["boxSizingborder-box","📦box-szg_border-box"]],"glamorIds":["ng405l","fv6wzy","18rijld"]}',
}
}
id="evergreen-hydrate"
Expand Down
Binary file modified src/ssr/test/snapshots/extractStyles.js.snap
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion src/table/src/TableRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ class TableRow extends PureComponent {
display="flex"
aria-selected={isHighlighted}
aria-current={isSelected}
data-isselecteable={isSelectable}
data-isselectable={isSelectable}
{...(isSelectable
? {
tabIndex: 0
Expand Down
8 changes: 4 additions & 4 deletions src/theme/src/default-theme/foundational-styles/scales.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
*/
export default {
neutral: {
N1: '#FAFAFA',
N1: '#F9F9FB',
N2: '#F5F6F7',
N3: '#EDF0F2',
N4: '#E4E7EB',
Expand All @@ -16,7 +16,7 @@ export default {
N10: '#234361', // Normal Text AAA

// Transparent variants.
N1A: 'rgba(67, 90, 111, 0.03)',
N1A: 'rgba(67, 90, 111, 0.04)',
N2A: 'rgba(67, 90, 111, 0.06)',
N3A: 'rgba(67, 90, 111, 0.09)',
N4A: 'rgba(67, 90, 111, 0.14)',
Expand All @@ -27,7 +27,7 @@ export default {
},

blue: {
B1: '#f7fafd',
B1: '#f7f9fd',
B2: '#f1f7fc',
B3: '#e9f2fa',
B4: '#ddebf7',
Expand All @@ -39,7 +39,7 @@ export default {
B10: '#084b8a', // Normal Text AAA

// Transparent variants.
B1A: 'rgba(16, 112, 202, 0.03)',
B1A: 'rgba(16, 112, 202, 0.04)',
Copy link
Contributor

@jeroenransijn jeroenransijn Jul 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should update B1 as well?

Copy link
Contributor Author

@mshwery mshwery Jul 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably so.

Copy link
Contributor Author

@mshwery mshwery Jul 18, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jeroenransijn done

B2A: 'rgba(16, 112, 202, 0.06)',
B3A: 'rgba(16, 112, 202, 0.09)',
B4A: 'rgba(16, 112, 202, 0.14)',
Expand Down
9 changes: 4 additions & 5 deletions src/themer/src/createRowAppearance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import createAppearance from './createAppearance'
import missingStateWarning from './missingStateWarning'

const hoverState = '&[data-isselecteable="true"]:hover'
const focusState = '&[data-isselecteable="true"]:focus, &[aria-selected="true"]'
const activeState =
'&[aria-current="true"], &[data-isselecteable="true"]:active'
const hoverState = '&[data-isselectable="true"]:hover'
const focusState = '&[data-isselectable="true"]:focus, &[aria-selected="true"]'
const activeState = '&[aria-current="true"], &[data-isselectable="true"]:active'
const currentState = '&[aria-current="true"]'

const baseStyle = {
'&[data-isselecteable="true"]': {
'&[data-isselectable="true"]': {
cursor: 'pointer'
},
outline: 'none'
Expand Down