mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
[Graph] Remove transparentize
color function (#216072)
## Summary Removes `Graph` usage of color functions in favor of color tokens as requested in https://github.com/elastic/kibana/issues/199715#custom-colors. The [guidelines](https://docs.google.com/document/d/1IAKbasq1nDfqd2IU3KdP8cwD3uCCAwkIekKRq7zgyWg/edit?tab=t.0#heading=h.5rebxirnvgy5) recommend using opaque colors when possible. ## Screenshots ### Before <img width="1726" alt="Screenshot 2025-03-26 at 12 12 00" src="https://github.com/user-attachments/assets/ff9dc939-eb84-486c-b52e-9b5760e6d9a3" /> ### After <img width="649" alt="Screenshot 2025-03-27 at 10 51 27" src="https://github.com/user-attachments/assets/5471db37-95f4-43e8-b3f8-82652dde8b7f" /> <!-- > [!NOTE] > The border looks wider because as it is opaque. --> ### Checklist - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Nick Partridge <nicholas.partridge@elastic.co>
This commit is contained in:
parent
9679f29415
commit
c7218a3fdb
2 changed files with 6 additions and 4 deletions
|
@ -110,11 +110,12 @@ exports[`graph_visualization should render to svg elements 1`] = `
|
|||
},
|
||||
Object {
|
||||
"map": undefined,
|
||||
"name": "1e54f3",
|
||||
"name": "1tbq19o",
|
||||
"next": undefined,
|
||||
"styles": "
|
||||
stroke-width: 4px;
|
||||
stroke: rgba(11,100,221,0.25);
|
||||
stroke: #BFDBFF;
|
||||
paint-order: stroke;
|
||||
",
|
||||
"toString": [Function],
|
||||
},
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
import React, { useRef } from 'react';
|
||||
import d3, { ZoomEvent } from 'd3';
|
||||
import { css } from '@emotion/react';
|
||||
import { type UseEuiTheme, euiTextTruncate, useEuiTheme, transparentize } from '@elastic/eui';
|
||||
import { type UseEuiTheme, euiTextTruncate, useEuiTheme } from '@elastic/eui';
|
||||
import { Workspace, WorkspaceNode, TermIntersect, ControlType, WorkspaceEdge } from '../../types';
|
||||
import { makeNodeId } from '../../services/persistence';
|
||||
import { getIconOffset, IconRenderer } from '../icon_renderer';
|
||||
|
@ -191,7 +191,8 @@ export function GraphVisualization({
|
|||
node.isSelected &&
|
||||
css`
|
||||
stroke-width: ${euiThemeContext.euiTheme.size.xs};
|
||||
stroke: ${transparentize(euiThemeContext.euiTheme.colors.primary, 0.25)};
|
||||
stroke: ${euiThemeContext.euiTheme.colors.borderBasePrimary};
|
||||
paint-order: stroke;
|
||||
`,
|
||||
]}
|
||||
/>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue