Skip to content
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

Increase contrast for EuiCodeBlock colors #3309

Merged
merged 15 commits into from
May 28, 2020
Merged

Increase contrast for EuiCodeBlock colors #3309

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
62b9d6d
Increase contrast for EuiCodeBlock colors
ryankeairns Apr 13, 2020
9f08b6e
add CL
ryankeairns Apr 13, 2020
3c5870a
Merge master branch into rk/3243-code-block-colors
ryankeairns Apr 14, 2020
23fdc84
Update CHANGELOG.md
elizabetdev May 25, 2020
e36460e
Merge remote-tracking branch 'upstream/master' into rk/3243-code-bloc…
elizabetdev May 25, 2020
abb0893
update changelog
elizabetdev May 25, 2020
c4e579b
Improving colors and examples
elizabetdev May 26, 2020
ea410f2
Adding more colors
elizabetdev May 26, 2020
a20f66a
remove unused classname
elizabetdev May 26, 2020
2d60eba
Addition and deletion shadow position
elizabetdev May 27, 2020
1ada3d6
Separate tag and name classes
elizabetdev May 27, 2020
508a220
Improving html example
elizabetdev May 27, 2020
bb61da9
Removing unecessary empty space
elizabetdev May 27, 2020
3e35c12
Merge remote-tracking branch 'upstream/master' into rk/3243-code-bloc…
elizabetdev May 28, 2020
f8dcf15
Color blind palette
elizabetdev May 28, 2020
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
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
- Converted `EuiDatePicker`, `EuiDatePickerRange`, `EuiSuperDatePicker`, and `EuiSuperUpdateButton` to TypeScript ([#2891](https://github.com/elastic/eui/pull/2891))
- Improved condensed `EuiTabs` focus states ([#3299](https://github.com/elastic/eui/pull/3299))

**Bug Fixes**

- Fixed code-related color variables to attain proper contrast levels in `EuiCodeBlock` ([#3309](https://github.com/elastic/eui/pull/3309))
elizabetdev marked this conversation as resolved.
Show resolved Hide resolved

## [`22.5.0`](https://github.com/elastic/eui/tree/v22.5.0)

- Added `forceState` prop to control `EuiAccordion` state from outside ([#3240](https://github.com/elastic/eui/pull/3240))
Expand Down
15 changes: 9 additions & 6 deletions src/components/code/_code_block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,18 +227,21 @@
color: $euiCodeBlockSectionColor;
}

.hljs-addition {
background-color: $euiCodeBlockAdditionBackgroundColor;
color: $euiCodeBlockAdditionColor;
.hljs-addition,
.hljs-deletion {
display: inline-block;
padding-left: $euiSizeXS;
width: 100%;
}

.hljs-addition {
border-left: $euiBorderWidthThick solid $euiCodeBlockAdditionBorderColor;
elizabetdev marked this conversation as resolved.
Show resolved Hide resolved
color: $euiCodeBlockAdditionColor;
}

.hljs-deletion {
background-color: $euiCodeBlockDeletionBackgroundColor;
border-left: $euiBorderWidthThick solid $euiCodeBlockDeletionBorderColor;
color: $euiCodeBlockDeletionColor;
display: inline-block;
width: 100%;
}

.hljs-selector-class {
Expand Down
27 changes: 12 additions & 15 deletions src/global_styling/variables/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,26 +122,23 @@ $euiColorChartBand: $euiColorLightestShade !default;
$euiCodeBlockBackgroundColor: $euiColorLightestShade !default;
$euiCodeBlockColor: $euiTextColor !default;
$euiCodeBlockSelectedBackgroundColor: inherit !default;
$euiCodeBlockCommentColor: #998 !default;
$euiCodeBlockCommentColor: $euiTextSubduedColor !default;
$euiCodeBlockSelectorTagColor: inherit !default;
$euiCodeBlockStringColor: #DD0A73 !default;
$euiCodeBlockNumberColor: #00A69B !default;
$euiCodeBlockKeywordColor: #333 !default;
$euiCodeBlockStringColor: makeHighContrastColor($euiColorAccentText, $euiCodeBlockBackgroundColor) !default;
$euiCodeBlockNumberColor: makeHighContrastColor($euiColorSecondaryText, $euiCodeBlockBackgroundColor) !default;
$euiCodeBlockKeywordColor: inherit !default;
$euiCodeBlockFunctionTitleColor: inherit !default;
$euiCodeBlockTagColor: #0079A5 !default;
$euiCodeBlockNameColor: inherit !default;
elizabetdev marked this conversation as resolved.
Show resolved Hide resolved
$euiCodeBlockTypeColor: #0079A5 !default;
$euiCodeBlockTagColor: makeHighContrastColor($euiColorPrimaryText, $euiCodeBlockBackgroundColor) !default;
$euiCodeBlockTypeColor: makeHighContrastColor($euiColorPrimaryText, $euiCodeBlockBackgroundColor) !default;
$euiCodeBlockAttributeColor: inherit !default;
$euiCodeBlockSymbolColor: #990073 !default;
$euiCodeBlockSymbolColor: makeHighContrastColor($euiColorAccentText, $euiCodeBlockBackgroundColor) !default;
$euiCodeBlockParamsColor: inherit !default;
$euiCodeBlockMetaColor: #999 !default;
$euiCodeBlockTitleColor: #900 !default;
$euiCodeBlockRegexpColor: #009926 !default;
$euiCodeBlockBuiltInColor: #0086B3 !default;
$euiCodeBlockSectionColor: #FFC66D !default;
$euiCodeBlockAdditionBackgroundColor: #DFD !default;
$euiCodeBlockMetaColor: $euiTextSubduedColor !default;
$euiCodeBlockTitleColor: $euiColorDangerText !default;
elizabetdev marked this conversation as resolved.
Show resolved Hide resolved
$euiCodeBlockSectionColor: makeHighContrastColor($euiColorWarningText, $euiCodeBlockBackgroundColor) !default;
$euiCodeBlockAdditionBorderColor: $euiColorSecondary !default;
$euiCodeBlockAdditionColor: inherit !default;
$euiCodeBlockDeletionBackgroundColor: #FDD !default;
$euiCodeBlockDeletionBorderColor: $euiColorDanger !default;
$euiCodeBlockDeletionColor: inherit !default;
$euiCodeBlockSelectorClassColor: inherit !default;
$euiCodeBlockSelectorIdColor: inherit !default;
1 change: 0 additions & 1 deletion src/themes/eui/eui_colors_dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@ $euiCodeBlockNumberColor: #F77669;
$euiCodeBlockKeywordColor: #C792EA;
$euiCodeBlockFunctionTitleColor: #75A5FF;
$euiCodeBlockTagColor: #ABB2BF;
$euiCodeBlockNameColor: #E06C75;
$euiCodeBlockTypeColor: #DA4939;
elizabetdev marked this conversation as resolved.
Show resolved Hide resolved
$euiCodeBlockAttributeColor: #80CBBF;
$euiCodeBlockSymbolColor: #C792EA;
Expand Down