[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:
Maria Iriarte 2025-03-31 14:26:10 +02:00 committed by GitHub
parent 9679f29415
commit c7218a3fdb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 6 additions and 4 deletions

View file

@ -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],
},

View file

@ -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;
`,
]}
/>