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

Amsterdam: better code block contrast #4272

Merged
merged 10 commits into from
Nov 17, 2020
Merged

Amsterdam: better code block contrast #4272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e395a79
Amsterdam: better code block contrast
snide Nov 16, 2020
17700f9
remove extra prop
snide Nov 16, 2020
74c72b7
no, back to purple
snide Nov 16, 2020
de70169
make high contrast just in case
snide Nov 16, 2020
1229fab
cl
snide Nov 16, 2020
f0d46d4
feedback
snide Nov 16, 2020
24efc45
don't forget dark mode fonts
snide Nov 16, 2020
ed9186d
feedback
snide Nov 17, 2020
4b0a257
feedback
snide Nov 17, 2020
c74042d
Update CHANGELOG.md
snide Nov 17, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

- Unify focus states by leaning into `outline` and restricting to keyboard navigation ([#4242](https://github.com/elastic/eui/pull/4242))
- Removed faux border from `EuiAvatar` ([#4255](https://github.com/elastic/eui/pull/4255))
- Changed the color and font-weight of inline code block ([#4272](https://github.com/elastic/eui/pull/4272))

## [`30.3.0`](https://github.com/elastic/eui/tree/v30.3.0)

Expand Down
6 changes: 3 additions & 3 deletions src/components/code/_code_block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
@include euiCodeFont;
display: block;
line-height: $euiLineHeight;
font-weight: $euiFontWeightRegular;
font-weight: $euiCodeFontWeightRegular;
font-size: inherit;
}

Expand Down Expand Up @@ -180,7 +180,7 @@

.hljs-selector-tag {
color: $euiCodeBlockSelectorTagColor;
font-weight: bold;
font-weight: $euiCodeFontWeightBold;
}

.hljs-string,
Expand Down Expand Up @@ -274,7 +274,7 @@
}

.hljs-strong {
font-weight: bold;
font-weight: $euiCodeFontWeightBold;
}

.hljs-link {
Expand Down
12 changes: 7 additions & 5 deletions src/global_styling/variables/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,13 @@ $euiLineHeight: 1.5 !default;
$euiBodyLineHeight: 1 !default;

// Font weights
$euiFontWeightLight: 300 !default;
$euiFontWeightRegular: 400 !default;
$euiFontWeightMedium: 500 !default;
$euiFontWeightSemiBold: 600 !default;
$euiFontWeightBold: 700 !default;
$euiFontWeightLight: 300 !default;
$euiFontWeightRegular: 400 !default;
$euiFontWeightMedium: 500 !default;
$euiFontWeightSemiBold: 600 !default;
$euiFontWeightBold: 700 !default;
$euiCodeFontWeightRegular: 400 !default;
$euiCodeFontWeightBold: 700 !default;
Comment on lines +56 to +57
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Added these to mainline as well without changing their values. Felt like we needed the separation.


// Titles map
// Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
Expand Down
3 changes: 3 additions & 0 deletions src/themes/eui-amsterdam/global_styling/variables/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ $euiFontSizeXXL: floor($euiFontSize * 2.43); // 34px // h1

$euiBodyLineHeight: 1.142857143; // 16px from a 14px base font size to ensure it aligns to our 16px grid

$euiCodeFontWeightRegular: 400;
$euiCodeFontWeightBold: 700;

// Use 8px increments for base gridline
@function lineHeightFromBaseline($multiplier: 3) {
@return convertToRem(($euiSize/2)*$multiplier);
Expand Down
3 changes: 0 additions & 3 deletions src/themes/eui-amsterdam/overrides/_code.scss
View file
Open in desktop

This file was deleted.

8 changes: 8 additions & 0 deletions src/themes/eui-amsterdam/overrides/_code_block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.euiCodeBlock.euiCodeBlock--inline {
border-radius: $euiBorderRadiusSmall;
color: makeHighContrastColor($euiColorVis3, $euiCodeBlockBackgroundColor);
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe use a code variable that is the same?

Suggested change
color: makeHighContrastColor($euiColorVis3, $euiCodeBlockBackgroundColor);
color: $euiCodeBlockKeywordColor;

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Gonna leave this. I prefer using the root variable until there is more than one usage that exists.


.euiCodeBlock__code {
font-weight: $euiCodeFontWeightBold;
}
}
2 changes: 1 addition & 1 deletion src/themes/eui-amsterdam/overrides/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@import 'button_empty';
@import 'button_group';
@import 'call_out';
@import 'code';
@import 'code_block';
@import 'context_menu';
@import 'filter_group';
@import 'form_control_layout';
Expand Down