github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Console] Small adjustments for Borealis (#206481)

Browse source 
Addresses https://github.com/elastic/kibana/issues/203664

## Summary

This PR adds two small fixed to Console for Borealis theme: 

1. An usage of `euiColorVis` is being replaced with `euiColorPrimary`.
This color is used for the 100-199 status codes in multi-request
responses, but it's not really in use (yet) as there are no Es APIs that
I'm aware of that return 100-199 status codes.

Console status codes in Borealis theme:


https://github.com/user-attachments/assets/9c25b17e-8b18-46fa-a846-074e266ed08f

2. Two usages of `transparentize()` are removed. One of them is used in
a variable that is not used at all so it is removed altogether. The
other one is for the box shadow of the actions panel.

Before:
<img width="611" alt="before"
src="https://github.com/user-attachments/assets/211a0b65-ecfa-4f25-a665-a09aad6ff769"
/>

Now:
<img width="537" alt="new"
src="https://github.com/user-attachments/assets/98fdef0e-1bb2-425b-8021-537bc52dbcf4"
/>


**Note**: There are a few more usages of `transparentize()` in the
`public/styles/_app.scss` file, but they are needed as they are used for
overlaying line decorations in the editor and, without transparency, the
text in the editor would not be visible. They are used for the request
selection blue box and for the mutliple-response status codes:

<img width="620" alt="Screenshot 2025-01-13 at 12 28 02"
src="https://github.com/user-attachments/assets/c3bff3c0-0127-47e4-a82f-0c21d06a6c41"
/>
<img width="598" alt="Screenshot 2025-01-13 at 12 30 06"
src="https://github.com/user-attachments/assets/0e2d90fa-602e-432b-b91f-f8b4b4a961ae"
/>

As discussed with @mgadewoll, given that transparency is needed, we
cannot avoid the usage of `transparentize()` and it's okay to leave it
as is. We could alternatively use `rgba()` but there is not much of a
difference as this is also a sass color manipulation function.
This commit is contained in:
Elena Stoeva 2025-01-14 14:25:44 +00:00 • committed by GitHub
parent 5ad3ef7b0a
commit 9935fe7fa6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 3 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/platform/plugins/shared/console/public/application/containers/embeddable/_variables.scss
View file

@ -1,5 +1,4 @@
$embeddableConsoleBackground: lightOrDarkTheme($euiColorDarkestShade, $euiColorInk);
$embeddableConsoleText: lighten(makeHighContrastColor($euiColorLightestShade, $embeddableConsoleBackground), 20%);
$embeddableConsoleBorderColor: transparentize($euiColorGhost, .8);
$embeddableConsoleInitialHeight: $euiSizeXXL;
$embeddableConsoleMaxHeight: calc(100vh - var(--euiFixedHeadersOffset, 0) - $euiSize);

6
src/platform/plugins/shared/console/public/styles/_app.scss
View file

@ -75,7 +75,7 @@
height: $euiSizeL;
background-color: $euiFormBackgroundColor;
border-radius: $euiSizeXS;
box-shadow: 0 0 $euiSizeXS $euiSizeXS transparentize($euiShadowColor, .9);
box-shadow: 0 0 $euiSizeXS * .5 $euiSizeXS * .5 $euiColorLightShade;
padding-top: $euiSize * .1;
overflow-y: auto;
}
@ -148,11 +148,11 @@
}
.monaco__status_code_line--primary {
background-color: transparentize($euiColorVis1, .9);
background-color: transparentize($euiColorPrimary, .9);
}
.monaco__status_code_line_number--primary {
background-color: transparentize($euiColorVis1, .5);
background-color: transparentize($euiColorPrimary, .5);
}
.monaco__status_code_line--success {