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

[Security Solution][threat hunting explore] EUI refresh: Rename color variables (#204908)

Browse source 
## Summary

https://github.com/elastic/kibana/issues/202499

### Running Kibana with the Borealis theme
In order to run Kibana with Borealis, you'll need to do the following:

Set the following in kibana.dev.yml:
uiSettings.experimental.themeSwitcherEnabled: true

Run Kibana with the following environment variable set:
KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn
start

This will expose a toggle under Stack Management > Advanced Settings >
Theme version, which you can use to toggle between Amsterdam and
Borealis.


![Image](https://github.com/user-attachments/assets/78d64946-43fc-4400-bbb1-229d900b7f05)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Angela Chuang 2025-01-09 12:47:25 +00:00 • committed by GitHub
parent 78dfe5f81e
commit 0c0dd631bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 62 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

4
x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx
View file

@ -106,9 +106,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
const { euiTheme } = useEuiTheme();
const emptyLabelStyle = useMemo(
() => ({
color: euiTheme.colors.darkShade,
color: euiTheme.colors.textSubdued,
}),
[euiTheme.colors.darkShade]
[euiTheme.colors.textSubdued]
);
const className = isChartEmbeddablesEnabled ? undefined : 'eui-textTruncate';

86
x-pack/solutions/security/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { memo, useCallback } from 'react';
import React, { memo, useCallback, useMemo } from 'react';
import {
EuiButton,
EuiCard,
@ -13,7 +13,6 @@ import {
EuiFlexItem,
EuiPageHeader,
useEuiTheme,
type EuiThemeComputed,
EuiButtonEmpty,
} from '@elastic/eui';
import { css } from '@emotion/react';
@ -33,44 +32,53 @@ const imgUrls = {
endpoint: endpointSvg,
};
const headerCardStyles = css`
span.euiTitle {
font-size: 36px;
line-height: 100%;
}
`;
const pageHeaderStyles = css`
h1 {
font-size: 18px;
}
`;
const getFlexItemStyles = (euiTheme: EuiThemeComputed) => css`
background: ${euiTheme.colors.lightestShade};
padding: 20px;
`;
const cardStyles = css`
img {
margin-top: 20px;
max-width: 400px;
}
`;
const footerStyles = css`
span.euiTitle {
font-size: 36px;
line-height: 100%;
}
max-width: 600px;
display: block;
margin: 20px auto 0;
`;
export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) => {
const useEmptyPromptStyles = () => {
const { euiTheme } = useEuiTheme();
const headerCardStyles = css`
span.euiTitle {
font-size: ${euiTheme.base * 2.25}px;
line-height: 100%;
}
`;
const pageHeaderStyles = css`
h1 {
font-size: ${euiTheme.base * 1.125}px;
}
`;
const flexItemStyles = css`
background: ${euiTheme.colors.backgroundBaseSubdued};
padding: ${euiTheme.base * 1.25}px;
`;
const cardStyles = css`
img {
margin-top: ${euiTheme.base * 1.25}px;
max-width: ${euiTheme.components.forms.maxWidth};
}
`;
const footerStyles = css`
span.euiTitle {
font-size: ${euiTheme.base * 2.25}px;
line-height: 100%;
}
max-width: 600px;
display: block;
margin: ${euiTheme.base * 1.25}px auto 0;
`;
return useMemo(
() => ({ headerCardStyles, pageHeaderStyles, flexItemStyles, cardStyles, footerStyles }),
[cardStyles, flexItemStyles, footerStyles, headerCardStyles, pageHeaderStyles]
);
};
export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) => {
const { headerCardStyles, pageHeaderStyles, flexItemStyles, cardStyles, footerStyles } =
useEmptyPromptStyles();
const { navigateTo } = useNavigateTo();
const navigateToAddIntegrations = useCallback(() => {
@ -123,7 +131,7 @@ export const EmptyPromptComponent = memo(({ onSkip }: { onSkip?: () => void }) =
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem css={getFlexItemStyles(euiTheme)}>
<EuiFlexItem css={flexItemStyles}>
<EuiFlexGroup gutterSize="m">
<EuiFlexItem>
<EuiCard

2
x-pack/solutions/security/plugins/security_solution/public/common/components/navigation/nav_item_beta_badge.tsx
View file

@ -19,7 +19,7 @@ export const NavItemBetaBadge = ({ text, className }: { text?: string; className
size="s"
css={css`
margin-left: ${euiTheme.size.s};
color: ${euiTheme.colors.text};
color: ${euiTheme.colors.textParagraph};
vertical-align: middle;
margin-bottom: ${euiTheme.size.xxs};
`}

2
x-pack/solutions/security/plugins/security_solution/public/common/components/split_accordion/split_accordion.tsx
View file

@ -32,7 +32,7 @@ export const SplitAccordion = ({
initialIsOpen={initialIsOpen}
className={css`
.euiAccordion__triggerWrapper {
background: ${euiTheme.colors.lightestShade};
background: ${euiTheme.colors.backgroundBaseSubdued};
padding: ${euiTheme.size.m};
}
`}

2
x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding.tsx
View file

@ -46,7 +46,7 @@ export const OnboardingPage = React.memo(() => {
restrictWidth={PAGE_CONTENT_WIDTH}
paddingSize="xl"
bottomBorder="extended"
style={{ backgroundColor: euiTheme.colors.body }}
style={{ backgroundColor: euiTheme.colors.backgroundBaseSubdued }}
>
<Routes>
<Route

2
x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_callout.styles.ts
View file

@ -12,7 +12,7 @@ export const useCardCallOutStyles = () => {
const { euiTheme } = useEuiTheme();
return css`
padding: ${euiTheme.size.s};
border: 1px solid ${euiTheme.colors.lightShade};
border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.backgroundBaseSubdued};
border-radius: ${euiTheme.size.s};
`;
};

2
x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/connectors/connector_setup.tsx
View file

@ -33,7 +33,7 @@ const usePanelCss = () => {
.connectorSelectorPanel {
height: 160px;
&.euiPanel:hover {
background-color: ${euiTheme.colors.lightestShade};
background-color: ${euiTheme.colors.backgroundBaseSubdued};
}
}
`;

8
x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts
View file

@ -12,7 +12,7 @@ export const HEIGHT_ANIMATION_DURATION = 250;
export const useCardPanelStyles = () => {
const { euiTheme, colorMode } = useEuiTheme();
const successBackgroundColor = euiTheme.colors.backgroundBaseSuccess;
const successBackgroundColor = euiTheme.colors.backgroundLightSuccess;
const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
const darkModeStyles = useDarkPanelStyles(isDarkMode);
@ -24,7 +24,7 @@ export const useCardPanelStyles = () => {
.onboardingCardIcon {
padding: ${euiTheme.size.m};
border-radius: 50%;
background-color: ${isDarkMode ? euiTheme.colors.body : euiTheme.colors.lightestShade};
background-color: ${euiTheme.colors.backgroundBaseSubdued};
}
.onboardingCardHeaderTitle {
font-weight: ${euiTheme.font.weight.semiBold};
@ -65,8 +65,8 @@ export const useCardPanelStyles = () => {
export const useDarkPanelStyles = (isDarkMode: boolean) => {
const { euiTheme } = useEuiTheme();
const darkPanelStyles = css`
background-color: ${euiTheme.colors.lightestShade};
border-color: ${euiTheme.colors.mediumShade};
background-color: ${euiTheme.colors.backgroundBasePlain};
border-color: ${euiTheme.colors.borderBasePlain};
`;
return isDarkMode ? darkPanelStyles : '';
};

6
x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts
View file

@ -22,7 +22,7 @@ export const useCardStyles = () => {
.headerCardLink,
.headerCardLink * {
text-decoration: underline;
text-decoration-color: ${euiTheme.colors.primaryText};
text-decoration-color: ${euiTheme.colors.textPrimary};
}
}
@ -32,9 +32,9 @@ export const useCardStyles = () => {
${isDarkMode
? `
background-color: ${euiTheme.colors.lightestShade};
background-color: ${euiTheme.colors.backgroundBasePlain};
box-shadow: none;
border: 1px solid ${euiTheme.colors.mediumShade};
border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain};
`
: ''}
`;

2
x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts
View file

@ -16,7 +16,7 @@ export const useOnboardingHeaderStyles = () => {
width: calc(${PAGE_CONTENT_WIDTH} / 2);
}
.onboardingHeaderGreetings {
color: ${euiTheme.colors.darkShade};
color: ${euiTheme.colors.textSubdued};
}
.onboardingHeaderTopicSelector {
width: calc(${PAGE_CONTENT_WIDTH} / 3);