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

[9.0] [Defend Workflows][Eui Visual Refresh] Removed transparentize usage in responder (#208457) (#214860)

Browse source 
# Backport

This will backport the following commits from `main` to `9.0`:
- [[Defend Workflows][Eui Visual Refresh] Removed transparentize usage
in responder (#208457)](https://github.com/elastic/kibana/pull/208457)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Candace
Park","email":"56409205+parkiino@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-11T22:28:46Z","message":"[Defend
Workflows][Eui Visual Refresh] Removed transparentize usage in responder
(#208457)\n\n## Summary\r\n\r\n- [x] Removed use of color calculating
function `transparentize()` \r\n- [x] Begin removal of JSON tokens when
possible in favor of
colors\r\ntokens\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eac85d4d9971e6bc5164a7ff1abc20985af53159","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Defend
Workflows","EUI Visual Refresh","v9.1.0"],"title":"[Defend
Workflows][Eui Visual Refresh] Removed transparentize usage in
responder","number":208457,"url":"https://github.com/elastic/kibana/pull/208457","mergeCommit":{"message":"[Defend
Workflows][Eui Visual Refresh] Removed transparentize usage in responder
(#208457)\n\n## Summary\r\n\r\n- [x] Removed use of color calculating
function `transparentize()` \r\n- [x] Begin removal of JSON tokens when
possible in favor of
colors\r\ntokens\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eac85d4d9971e6bc5164a7ff1abc20985af53159"}},"sourceBranch":"main","suggestedTargetBranches":["9.0"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208457","number":208457,"mergeCommit":{"message":"[Defend
Workflows][Eui Visual Refresh] Removed transparentize usage in responder
(#208457)\n\n## Summary\r\n\r\n- [x] Removed use of color calculating
function `transparentize()` \r\n- [x] Begin removal of JSON tokens when
possible in favor of
colors\r\ntokens\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"eac85d4d9971e6bc5164a7ff1abc20985af53159"}}]}]
BACKPORT-->
This commit is contained in:
Candace Park 2025-03-17 17:20:21 -04:00 • committed by GitHub
parent 7fd9a8309b
commit 46933aaf1f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 27 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

7
packages/kbn-babel-preset/styled_components_files.js
View file

@ -331,12 +331,6 @@ module.exports = {
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]rule_details[\/\\]right[\/\\]content.test.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]flyout[\/\\]rule_details[\/\\]right[\/\\]index.test.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_card_grid[\/\\]components[\/\\]grid_header.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]artifact_entry_card_minified.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]card_compressed_header.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]card_container_panel.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]card_header.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]card_section_panel.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]criteria_conditions.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]date_field_value.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]effect_scope.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]artifact_entry_card[\/\\]components[\/\\]touched_by_users.tsx/,
@ -356,7 +350,6 @@ module.exports = {
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]history_item.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]side_panel[\/\\]side_panel_content_layout.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]side_panel[\/\\]side_panel_content_manager.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]side_panel[\/\\]side_panel_flex_item.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]user_command_input.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]console.tsx/,
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]context_menu_with_router_support[\/\\]context_menu_item_nav_by_router.tsx/,

6
x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/artifact_entry_card_minified.tsx
View file

@ -17,7 +17,7 @@ import {
EuiFlexItem,
EuiButtonEmpty,
} from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import type { CriteriaConditionsProps } from './components/criteria_conditions';
import { CriteriaConditions } from './components/criteria_conditions';
import type { AnyArtifact } from './types';
@ -29,12 +29,12 @@ import type { ArtifactEntryCardDecoratorProps } from './artifact_entry_card';
const CardContainerPanel = styled(EuiSplitPanel.Outer)`
&.artifactEntryCardMinified + &.artifactEntryCardMinified {
margin-top: ${({ theme }) => theme.eui.euiSizeL};
margin-top: ${({ theme }) => theme.euiTheme.size.l};
}
`;
const CustomSplitInnerPanel = styled(EuiSplitPanel.Inner)`
background-color: ${({ theme }) => theme.eui.euiColorLightestShade} !important;
background-color: ${({ theme }) => theme.euiTheme.colors.backgroundBasePrimary};
`;
export interface ArtifactEntryCardMinifiedProps extends CommonProps {

6
x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_compressed_header.tsx
View file

@ -9,7 +9,7 @@ import type { ReactNode } from 'react';
import React, { memo, useCallback } from 'react';
import type { CommonProps } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { CardExpandButton } from './card_expand_button';
import { TextValueDisplay } from './text_value_display';
import { EffectScope } from './effect_scope';
@ -80,8 +80,8 @@ CardCompressedHeader.displayName = 'CardCompressedHeader';
const ButtonIconPlaceHolder = styled.div`
display: inline-block;
// Sizes below should match that of the Eui's Button Icon, so that it holds the same space.
width: ${({ theme }) => theme.eui.euiSizeL};
height: ${({ theme }) => theme.eui.euiSizeL};
width: ${({ theme }) => theme.euiTheme.size.l};
height: ${({ theme }) => theme.euiTheme.size.l};
`;
const StyledEuiFlexGroup = styled(EuiFlexGroup)`

4
x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_container_panel.tsx
View file

@ -5,14 +5,14 @@
* 2.0.
*/
import styled from 'styled-components';
import styled from '@emotion/styled';
import { EuiPanel } from '@elastic/eui';
import type { EuiPanelProps } from '@elastic/eui/src/components/panel/panel';
import React, { memo } from 'react';
export const EuiPanelStyled = styled(EuiPanel)`
&.artifactEntryCard + &.artifactEntryCard {
margin-top: ${({ theme }) => theme.eui.euiSizeL};
margin-top: ${({ theme }) => theme.euiTheme.size.l};
}
`;

4
x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_header.tsx
View file

@ -8,7 +8,7 @@
import React, { memo } from 'react';
import type { CommonProps } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { DateFieldValue } from './date_field_value';
import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
import type { CardActionsFlexItemProps } from './card_actions_flex_item';
@ -23,7 +23,7 @@ export interface CardHeaderProps
}
const StyledEuiFlexItemSmallBottomMargin = styled(EuiFlexItem)`
margin-bottom: 4px !important;
margin-bottom: ${({ theme }) => theme.euiTheme.size.xs} !important;
`;
export const CardHeader = memo<CardHeaderProps>(

10
x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/card_section_panel.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { memo } from 'react';
import styled from 'styled-components';
import styled from '@emotion/styled';
import type { EuiPanelProps } from '@elastic/eui';
import { EuiPanel } from '@elastic/eui';
@ -16,15 +16,15 @@ export type CardSectionPanelProps = Exclude<
>;
const StyledEuiPanel = styled(EuiPanel)`
padding: 32px;
padding: ${({ theme }) => theme.euiTheme.size.xl};
&.top-section {
padding-bottom: 24px;
padding-bottom: ${({ theme }) => theme.euiTheme.size.l};
}
&.bottom-section {
padding-top: 24px;
padding-top: ${({ theme }) => theme.euiTheme.size.l};
}
&.artifact-entry-collapsible-card {
padding: 24px !important;
padding: ${({ theme }) => theme.euiTheme.size.l} !important;
}
`;

10
x-pack/solutions/security/plugins/security_solution/public/management/components/artifact_entry_card/components/criteria_conditions.tsx
View file

@ -8,7 +8,7 @@
import React, { memo, useCallback, useMemo } from 'react';
import type { CommonProps } from '@elastic/eui';
import { EuiExpression, EuiToken, EuiFlexGroup, EuiFlexItem, EuiBadge } from '@elastic/eui';
import styled from 'styled-components';
import styled from '@emotion/styled';
import { ListOperatorTypeEnum } from '@kbn/securitysolution-io-ts-list-types';
import {
CONDITION_OS,
@ -52,16 +52,16 @@ const OPERATOR_TYPE_LABELS_EXCLUDED = Object.freeze({
});
const EuiFlexGroupNested = styled(EuiFlexGroup)`
margin-left: ${({ theme }) => theme.eui.euiSizeXL};
margin-left: ${({ theme }) => theme.euiTheme.size.xl};
`;
const EuiFlexItemNested = styled(EuiFlexItem)`
margin-bottom: 6px !important;
margin-top: 6px !important;
margin-bottom: ${({ theme }) => theme.euiTheme.size.s} !important;
margin-top: ${({ theme }) => theme.euiTheme.size.s} !important;
`;
const StyledCondition = styled('span')`
margin-right: 6px;
margin-right: ${({ theme }) => theme.euiTheme.size.s};
`;
export type CriteriaConditionsProps = Pick<ArtifactInfo, 'os' | 'entries'> &

13
x-pack/solutions/security/plugins/security_solution/public/management/components/console/components/side_panel/side_panel_flex_item.tsx
View file

@ -6,16 +6,17 @@
*/
import React, { memo } from 'react';
import styled from 'styled-components';
import { EuiFlexItem, transparentize } from '@elastic/eui';
import styled from '@emotion/styled';
import { EuiFlexItem } from '@elastic/eui';
import { SidePanelContentManager } from './side_panel_content_manager';
import { useWithSidePanel } from '../../hooks/state_selectors/use_with_side_panel';
const StyledEuiFlexItemWhite = styled(EuiFlexItem)`
background-color: ${({ theme: { eui } }) => eui.euiColorEmptyShade} !important;
border-radius: ${({ theme: { eui } }) => `0 ${eui.euiSizeXS} ${eui.euiSizeXS} 0`};
box-shadow: 0 ${({ theme: { eui } }) => eui.euiSizeXS} ${({ theme: { eui } }) => eui.euiSizeXS}
${({ theme: { eui } }) => transparentize(eui.euiShadowColor, 0.04)};
background-color: ${({ theme: { euiTheme } }) => euiTheme.colors.backgroundBasePlain};
border-radius: ${({ theme: { euiTheme } }) => `0 ${euiTheme.size.xs} ${euiTheme.size.xs} 0`};
box-shadow: 0 ${({ theme: { euiTheme } }) => euiTheme.size.xs}
${({ theme: { euiTheme } }) => euiTheme.size.xs}
${({ theme: { euiTheme } }) => euiTheme.colors.borderBaseSubdued};
`;
export const SidePanelFlexItem = memo((props) => {