diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index 8435f59..ee525ae 100644 --- a/DEVELOPMENT.md +++ b/DEVELOPMENT.md @@ -162,7 +162,7 @@ Releases are handled automatically through semantic-release when changes are mer This is to support the `exactOptionalPropertyTypes` typescript option. 2. Override MUI component: - - Create a file like [this](packages/open-ui-kit/src/theme/light/mui/avatar.ts) inside the `mui` folder in each `theme`(light or dark) and per each component that you want to override; + - Create a file like [this](packages/open-ui-kit/src/theme/mui/avatar.ts) inside the `mui` folder in each `theme`(light or dark) and per each component that you want to override; - Export this file on the `index.ts` on the `mui` folder; - Add the custom override to the theme like [this](https://github.com/outshift-open/open-ui-kit/blob/main/packages/open-ui-kit/src/theme/light/light-theme.tsx#L146-L149); diff --git a/packages/open-ui-kit/.storybook/css/sidebar-headers.css b/packages/open-ui-kit/.storybook/css/sidebar-headers.css index bc551f4..325c095 100644 --- a/packages/open-ui-kit/.storybook/css/sidebar-headers.css +++ b/packages/open-ui-kit/.storybook/css/sidebar-headers.css @@ -10,7 +10,7 @@ line-height: 18px; letter-spacing: 0%; vertical-align: middle; - color: #00142B; + color: inherit; } .sidebar-header img { diff --git a/packages/open-ui-kit/.storybook/decorators.tsx b/packages/open-ui-kit/.storybook/decorators.tsx index c55d8f8..087a533 100644 --- a/packages/open-ui-kit/.storybook/decorators.tsx +++ b/packages/open-ui-kit/.storybook/decorators.tsx @@ -1,25 +1,14 @@ import "./css/typography.css"; -import { useEffect } from "react"; import { CssBaseline, ThemeProvider } from "@mui/material"; import { darkTheme } from "../src/theme/dark/dark-theme"; import { lightTheme } from "../src/theme/light/light-theme"; import { Decorator } from "@storybook/react"; import React from "react"; - -import { addons } from "@storybook/preview-api"; -import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode"; - -const channel = addons.getChannel(); +import { useDarkMode } from "storybook-dark-mode"; const ThemeDecorator: Decorator = (Story) => { - const [isDark, setDark] = React.useState(false); - - useEffect(() => { - // listen to DARK_MODE event - channel.on(DARK_MODE_EVENT_NAME, setDark); - return () => channel.off(DARK_MODE_EVENT_NAME, setDark); - }, [channel, setDark]); + const isDark = useDarkMode(); return ( diff --git a/packages/open-ui-kit/.storybook/preview.ts b/packages/open-ui-kit/.storybook/preview.ts index deb3565..1bcac73 100644 --- a/packages/open-ui-kit/.storybook/preview.ts +++ b/packages/open-ui-kit/.storybook/preview.ts @@ -15,6 +15,13 @@ export const decorators = [ThemeDecorator, withScreenshot, mockDateDecorator]; const preview: Preview = { parameters: { + backgrounds: { + default: "Light", + values: [ + { name: "Dark", value: "#00142B" }, + { name: "Light", value: "#EFF3FC" }, + ], + }, darkMode: { dark: { ...comomnTheme, diff --git a/packages/open-ui-kit/src/colors/colors.mdx b/packages/open-ui-kit/src/colors/colors.mdx index 4ceeab9..f9c0e7d 100644 --- a/packages/open-ui-kit/src/colors/colors.mdx +++ b/packages/open-ui-kit/src/colors/colors.mdx @@ -1,7 +1,7 @@ import { Meta, ColorPalette, ColorItem } from "@storybook/blocks"; import { Typography, Divider } from "@mui/material" import { lightTheme } from "../theme/light/light-theme"; -import { OS_LIGHT_COLORS } from "../theme/light/light-color-palette"; +import { OS_LIGHT_COLORS } from "../theme/color-palette"; diff --git a/packages/open-ui-kit/src/common/utils/utils.ts b/packages/open-ui-kit/src/common/utils/utils.ts index cdacc52..39c6179 100644 --- a/packages/open-ui-kit/src/common/utils/utils.ts +++ b/packages/open-ui-kit/src/common/utils/utils.ts @@ -16,7 +16,7 @@ import { Theme } from "@mui/material"; import { Severity } from "../types"; -import { PA_Colors } from "../../theme/dark/dark-color-palette"; +import { orangePalette, redPalette } from "@/theme/color-palette"; import { SEVERITY_VALUE } from "../constants"; // eslint-disable-next-line @typescript-eslint/no-empty-function @@ -31,9 +31,9 @@ export const getColorBySeverity = ( theme: Theme, ): string => { const severitiesToColors: Record = { - [Severity.CRITICAL]: PA_Colors.bordeaux[500], + [Severity.CRITICAL]: redPalette[500], [Severity.HIGH]: theme.palette.error.main, - [Severity.MEDIUM]: PA_Colors.orange[500], + [Severity.MEDIUM]: orangePalette[500], [Severity.LOW]: theme.palette.warning.main, [Severity.INFORMATION]: theme.palette.info.main, }; diff --git a/packages/open-ui-kit/src/components/autocomplete-tree/components/select-node.tsx b/packages/open-ui-kit/src/components/autocomplete-tree/components/select-node.tsx index d6ecc03..a055d8e 100644 --- a/packages/open-ui-kit/src/components/autocomplete-tree/components/select-node.tsx +++ b/packages/open-ui-kit/src/components/autocomplete-tree/components/select-node.tsx @@ -28,7 +28,7 @@ import { formatNodeValue, isLeaf, } from "@/common"; -import { PA_Colors } from "@/theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; import { AugmentedSelectNodeType } from "@/types"; import { useAutocompleteTreeContext } from "./autocomplete-tree-context"; import { @@ -202,7 +202,7 @@ export const SelectNodeListItem = ({ {selectableLeavesCount && ( {selectableLeavesCount} diff --git a/packages/open-ui-kit/src/components/autocomplete-tree/styles/index.ts b/packages/open-ui-kit/src/components/autocomplete-tree/styles/index.ts index 503667e..b72fc5f 100644 --- a/packages/open-ui-kit/src/components/autocomplete-tree/styles/index.ts +++ b/packages/open-ui-kit/src/components/autocomplete-tree/styles/index.ts @@ -14,13 +14,13 @@ * limitations under the License. */ -import { PA_Colors } from "@/theme/dark/dark-color-palette"; +import { surfaceDarkPalette } from "@/theme/color-palette"; import { darkTheme } from "@/theme/dark/dark-theme"; export const defaultPopperContentStyles = { width: "480px", maxHeight: "375px", - backgroundColor: PA_Colors.surface[500], + backgroundColor: surfaceDarkPalette[500], borderRadius: "4px", boxShadow: "0px 2px 3px 0px rgba(0, 0, 0, 0.30), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)", diff --git a/packages/open-ui-kit/src/components/filters/components/filters-bar/filters-bar-actions.tsx b/packages/open-ui-kit/src/components/filters/components/filters-bar/filters-bar-actions.tsx index 23e9369..e3057e5 100644 --- a/packages/open-ui-kit/src/components/filters/components/filters-bar/filters-bar-actions.tsx +++ b/packages/open-ui-kit/src/components/filters/components/filters-bar/filters-bar-actions.tsx @@ -23,7 +23,7 @@ import { import { Box, Button, Stack } from "@mui/material"; import { useEffect, useState } from "react"; import { styles } from "./styles"; -import { PA_Colors } from "@/theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; import { SearchField } from "@/components"; export interface FiltersBarActionsProps { @@ -89,7 +89,7 @@ export const FiltersBarActions = ({ color: activeFiltersCount && activeFiltersCount > 0 ? "inherit" - : PA_Colors.grey[200], + : greyPalette[200], }} > {activeFiltersCount} diff --git a/packages/open-ui-kit/src/components/filters/components/filters-bar/styles.ts b/packages/open-ui-kit/src/components/filters/components/filters-bar/styles.ts index 6c09ac8..546f9d4 100644 --- a/packages/open-ui-kit/src/components/filters/components/filters-bar/styles.ts +++ b/packages/open-ui-kit/src/components/filters/components/filters-bar/styles.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { PA_Colors } from "@/theme/dark/dark-color-palette"; +import { surfaceDarkPalette } from "@/theme/color-palette"; import { darkTheme } from "@/theme/dark/dark-theme"; export const styles = { @@ -38,7 +38,7 @@ export const styles = { }, chipTooltip: { "& .MuiTooltip-tooltip": { - backgroundColor: PA_Colors.surface[50], + backgroundColor: surfaceDarkPalette[50], color: darkTheme.palette.grey[50], marginBottom: "2px !important", height: "auto", diff --git a/packages/open-ui-kit/src/components/filters/components/filters-drawer/styles.ts b/packages/open-ui-kit/src/components/filters/components/filters-drawer/styles.ts index 96fe352..ea12e61 100644 --- a/packages/open-ui-kit/src/components/filters/components/filters-drawer/styles.ts +++ b/packages/open-ui-kit/src/components/filters/components/filters-drawer/styles.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import { PA_Colors } from "@/theme/dark/dark-color-palette"; +import { surfaceDarkPalette, greyPalette } from "@/theme/color-palette"; import { darkTheme } from "@/theme/dark/dark-theme"; const getChildAccordionMarginLeft = ( @@ -40,16 +40,16 @@ const getChildAccordionMarginLeft = ( const filterItemStyles = { loadingStack: { padding: "8px 24px", - backgroundColor: PA_Colors.surface[700], + backgroundColor: surfaceDarkPalette[700], }, parentAccordion: { "&.MuiPaper-root": { border: "0px solid !important", - borderBottom: `0.5px solid ${PA_Colors.surface[400]} !important`, + borderBottom: `0.5px solid ${surfaceDarkPalette[400]} !important`, boxShadow: "unset", margin: "0", "&:not(.Mui-disabled) .MuiAccordionSummary-expandIconWrapper": { - color: PA_Colors.grey[50], + color: greyPalette[50], }, "& .MuiAccordionSummary-content": { margin: 0, @@ -88,7 +88,7 @@ const filterItemStyles = { isSelectAllEnabledOnParent, )}`, "&:not(.Mui-disabled) .MuiAccordionSummary-expandIconWrapper": { - color: PA_Colors.grey[50], + color: greyPalette[50], }, "& .MuiAccordionSummary-content": { margin: 0, @@ -118,11 +118,11 @@ const filterItemStyles = { color: isSelected ? (darkTheme.palette.primary[500] ?? "unset") : darkTheme.palette.text.primary, - backgroundColor: PA_Colors.surface[700], + backgroundColor: surfaceDarkPalette[700], flexDirection: "row-reverse", }), accordionDetails: { - backgroundColor: PA_Colors.surface[700], + backgroundColor: surfaceDarkPalette[700], }, listItem: (level: number, isSelectAllEnabled: boolean) => { if (level === 0) { @@ -139,7 +139,7 @@ const filterItemStyles = { return { paddingLeft: "0px" }; // Default return value }, listItemButton: { - backgroundColor: PA_Colors.surface[700], + backgroundColor: surfaceDarkPalette[700], paddingTop: 0, paddingBottom: 0, }, @@ -163,7 +163,7 @@ const filtersDrawerStyles = { drawerHeader: { padding: "16px 24px", width: "480px", - backgroundColor: PA_Colors.surface[400], + backgroundColor: surfaceDarkPalette[400], }, drawerTitle: { justifyContent: "space-between", @@ -177,7 +177,7 @@ const filtersDrawerStyles = { }, clearAll: { "&.MuiButton-sizeMedium": { - backgroundColor: PA_Colors.surface[500], + backgroundColor: surfaceDarkPalette[500], height: "58px", justifyContent: "left", padding: "8px 16px", @@ -186,8 +186,8 @@ const filtersDrawerStyles = { }; const emptySearchStyles = { - emptySearchTypography: { color: PA_Colors.grey[300], marginTop: "50px" }, - emptySearchInput: { color: PA_Colors.grey[50] }, + emptySearchTypography: { color: greyPalette[300], marginTop: "50px" }, + emptySearchInput: { color: greyPalette[50] }, }; export const styles = { diff --git a/packages/open-ui-kit/src/custom-icons/AttackPathIcon.tsx b/packages/open-ui-kit/src/custom-icons/AttackPathIcon.tsx index a7fc75e..2cac62a 100644 --- a/packages/open-ui-kit/src/custom-icons/AttackPathIcon.tsx +++ b/packages/open-ui-kit/src/custom-icons/AttackPathIcon.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { grey50 } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function AttackPathIcon(props: SvgIconProps) { return ( @@ -29,13 +29,13 @@ export function AttackPathIcon(props: SvgIconProps) { > diff --git a/packages/open-ui-kit/src/custom-icons/AttackPathIconV2.tsx b/packages/open-ui-kit/src/custom-icons/AttackPathIconV2.tsx index 93ec4f3..b7e65ba 100644 --- a/packages/open-ui-kit/src/custom-icons/AttackPathIconV2.tsx +++ b/packages/open-ui-kit/src/custom-icons/AttackPathIconV2.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { grey50 } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function AttackPathIconV2(props: SvgIconProps) { return ( @@ -31,7 +31,7 @@ export function AttackPathIconV2(props: SvgIconProps) { diff --git a/packages/open-ui-kit/src/custom-icons/AzureCategory_None.tsx b/packages/open-ui-kit/src/custom-icons/AzureCategory_None.tsx index 52f933e..ed361fb 100644 --- a/packages/open-ui-kit/src/custom-icons/AzureCategory_None.tsx +++ b/packages/open-ui-kit/src/custom-icons/AzureCategory_None.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function AzureCategoryNone(props: SvgIconProps) { return ( @@ -27,7 +27,7 @@ export function AzureCategoryNone(props: SvgIconProps) { fill="none" > diff --git a/packages/open-ui-kit/src/custom-icons/AzureCategory_Storage.tsx b/packages/open-ui-kit/src/custom-icons/AzureCategory_Storage.tsx index bcee611..813514e 100644 --- a/packages/open-ui-kit/src/custom-icons/AzureCategory_Storage.tsx +++ b/packages/open-ui-kit/src/custom-icons/AzureCategory_Storage.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function AzureCategoryStorage(props: SvgIconProps) { return ( @@ -27,11 +27,11 @@ export function AzureCategoryStorage(props: SvgIconProps) { fill="none" > diff --git a/packages/open-ui-kit/src/custom-icons/CdrIcon.tsx b/packages/open-ui-kit/src/custom-icons/CdrIcon.tsx index 36ba806..e5d33b3 100644 --- a/packages/open-ui-kit/src/custom-icons/CdrIcon.tsx +++ b/packages/open-ui-kit/src/custom-icons/CdrIcon.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { grey50 } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function CdrIcon(props: SvgIconProps) { return ( @@ -31,13 +31,13 @@ export function CdrIcon(props: SvgIconProps) { fillRule="evenodd" clipRule="evenodd" d="M5.64378 13.3289C8.35038 2.58795 23.0684 2.56259 26.3883 11.9994C26.5843 12.5567 27.1535 12.8915 27.7358 12.7921C28.3181 12.6926 28.744 12.1879 28.744 11.5972V4.78168C28.744 4.11221 28.2013 3.56949 27.5318 3.56949C26.8623 3.56949 26.3196 4.11221 26.3196 4.78168V7.11755C19.9867 -0.173889 6.16197 1.35077 3.29289 12.7365C3.12931 13.3857 3.52296 14.0445 4.17214 14.2081C4.82132 14.3717 5.4802 13.9781 5.64378 13.3289ZM26.3562 18.6698C23.6496 29.4107 8.93162 29.4361 5.6117 19.9993C5.41566 19.442 4.84647 19.1072 4.26416 19.2066C3.68185 19.3061 3.25602 19.8108 3.25602 20.4015V27.217C3.25602 27.8865 3.79874 28.4292 4.46821 28.4292C5.13768 28.4292 5.6804 27.8865 5.6804 27.217V24.8811C12.0133 32.1726 25.838 30.6479 28.7071 19.2622C28.8707 18.613 28.477 17.9542 27.8279 17.7906C27.1787 17.627 26.5198 18.0206 26.3562 18.6698Z" - fill={grey50} + fill={greyPalette[50]} /> diff --git a/packages/open-ui-kit/src/custom-icons/ClassificationDataLabeling.tsx b/packages/open-ui-kit/src/custom-icons/ClassificationDataLabeling.tsx index 4063696..b846452 100644 --- a/packages/open-ui-kit/src/custom-icons/ClassificationDataLabeling.tsx +++ b/packages/open-ui-kit/src/custom-icons/ClassificationDataLabeling.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function ClassificationDataLabeling(props: SvgIconProps) { return ( @@ -31,15 +31,15 @@ export function ClassificationDataLabeling(props: SvgIconProps) { fillRule="evenodd" clipRule="evenodd" d="M15.1617 4.10831C13.8617 3.52831 12.2717 3.23831 10.4417 3.23831C8.61168 3.23831 7.02168 3.52831 5.72168 4.10831C4.39168 4.69831 3.72168 5.42831 3.72168 6.27831V13.6383C3.72168 14.4983 4.39168 15.2283 5.70168 15.8183C6.63426 16.2304 7.72363 16.4961 8.95845 16.6117V14.9109C8.87961 14.9009 8.80069 14.89 8.72168 14.8783C8.14168 14.7883 7.60168 14.6783 7.11168 14.5383C6.63168 14.3983 6.22168 14.2483 5.91168 14.0783C5.62168 13.9283 5.44168 13.7683 5.38168 13.6183V11.9883C5.65168 12.1283 5.95168 12.2583 6.28168 12.3783C6.66168 12.5083 7.08168 12.6283 7.52168 12.7183C7.95168 12.8083 8.42168 12.8783 8.92168 12.9283C9.90168 13.0283 10.9817 13.0283 11.9417 12.9283C12.3278 12.8881 12.7074 12.8349 13.0649 12.7688V11.0815C12.6985 11.151 12.3136 11.2066 11.9217 11.2483C10.9817 11.3483 9.91168 11.3483 8.94168 11.2483C8.46168 11.1983 7.99168 11.1283 7.56168 11.0383C7.12168 10.9483 6.72168 10.8283 6.35168 10.6983C6.00168 10.5783 5.68168 10.4283 5.39168 10.2783V8.29831C5.66168 8.43831 5.96168 8.56831 6.29168 8.68831C6.67168 8.82831 7.09168 8.93831 7.53168 9.02831C7.96168 9.11831 8.44168 9.18831 8.93168 9.23831C9.92168 9.33831 10.9817 9.33831 11.9517 9.23831C12.4317 9.18831 12.9017 9.11831 13.3317 9.02831C13.7617 8.93831 14.1817 8.81831 14.5817 8.68831C14.9117 8.56831 15.2217 8.43831 15.5017 8.29831V10.2783C15.4866 10.2864 15.4714 10.2944 15.4561 10.3023H17.1617V6.27831C17.1617 5.42831 16.4917 4.69831 15.1617 4.10831ZM13.7117 7.19831C11.5117 7.81831 9.28168 7.80831 7.19168 7.19831C6.19168 6.91831 5.60168 6.60831 5.41168 6.27831C5.60168 5.95831 6.20168 5.64831 7.19168 5.35831C9.30168 4.74831 11.5417 4.73831 13.7217 5.35831C14.9717 5.71831 15.3817 6.04831 15.4917 6.27831C15.3817 6.49831 14.9717 6.82831 13.7117 7.18831V7.19831Z" - fill={props.fill ?? PA_Colors.grey[50]} + fill={props.fill ?? greyPalette[50]} /> diff --git a/packages/open-ui-kit/src/custom-icons/CredentialExposure.tsx b/packages/open-ui-kit/src/custom-icons/CredentialExposure.tsx index b637755..6cc70d3 100644 --- a/packages/open-ui-kit/src/custom-icons/CredentialExposure.tsx +++ b/packages/open-ui-kit/src/custom-icons/CredentialExposure.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export const CredentialExposure = (props: SvgIconProps) => ( @@ -30,11 +30,11 @@ export const CredentialExposure = (props: SvgIconProps) => ( fillRule="evenodd" clipRule="evenodd" d="M4.125 11.9608V5.8125H19.875V18.1875H9.60076C9.48332 18.586 9.31659 18.9633 9.10763 19.3125H20.4375C20.748 19.3125 21 19.0605 21 18.75V5.25C21 4.9395 20.748 4.6875 20.4375 4.6875H3.5625C3.252 4.6875 3 4.9395 3 5.25V12.2819C3.35558 12.1322 3.73253 12.0232 4.125 11.9608ZM5.25173 11.9123L5.25225 10.875C5.25225 10.5645 5.50425 10.3125 5.81475 10.3125H6.375L6.37612 9.021C6.37612 8.40113 6.58538 7.86787 6.97913 7.47862C7.383 7.08037 7.95112 6.86888 8.62387 6.86888H8.625C9.9705 6.86888 10.875 7.734 10.875 9.02325V10.3147H11.4375C11.5871 10.3147 11.73 10.3744 11.8358 10.479C11.9404 10.5847 12 10.7287 12 10.8772L11.9978 15.375C11.9978 15.6855 11.7458 15.9375 11.4353 15.9375L9.72423 15.9368C9.65435 15.5436 9.53757 15.1666 9.37987 14.8118L10.8728 14.8125L10.875 11.4397L6.37725 11.4375L6.37679 12.1264C6.01786 12.0131 5.64108 11.9399 5.25173 11.9123ZM9.75 9.02325V10.3136L7.5 10.3125L7.50113 9.021C7.50113 8.80388 7.54725 8.499 7.76888 8.27962C7.95788 8.09287 8.25375 7.99388 8.62387 7.99388H8.625C9.35063 7.99388 9.75 8.3595 9.75 9.02325ZM16.5 13.6875H14.25V12.5625H16.5V13.6875ZM18.75 10.3125H14.25V9.1875H18.75V10.3125Z" - fill={props.fill ?? PA_Colors.grey[50]} + fill={props.fill ?? greyPalette[50]} /> diff --git a/packages/open-ui-kit/src/custom-icons/DNSSecurity.tsx b/packages/open-ui-kit/src/custom-icons/DNSSecurity.tsx index dcf42fb..ea54653 100644 --- a/packages/open-ui-kit/src/custom-icons/DNSSecurity.tsx +++ b/packages/open-ui-kit/src/custom-icons/DNSSecurity.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export const DNSSecurity = (props: SvgIconProps) => ( @@ -30,7 +30,7 @@ export const DNSSecurity = (props: SvgIconProps) => ( fillRule="evenodd" clipRule="evenodd" d="M5.72487 7.68993C6.41487 6.62993 7.34487 5.75993 8.43487 5.15993C9.05487 4.81993 9.71487 4.56993 10.4049 4.41993C9.96487 5.29993 9.59488 6.21993 9.31487 7.16993C9.21487 7.49993 9.39487 7.83992 9.71487 7.94992C10.0349 8.04992 10.3749 7.86993 10.4649 7.53993C10.8049 6.38993 11.2849 5.28993 11.8749 4.24993H11.9849H12.0949C12.6949 5.27993 13.1649 6.38993 13.5049 7.53993C13.6049 7.86993 13.9449 8.04992 14.2549 7.94992C14.5749 7.84993 14.7549 7.49993 14.6549 7.16993C14.3749 6.21993 14.0049 5.29993 13.5549 4.41993C14.2449 4.56993 14.9049 4.81993 15.5349 5.15993C16.6349 5.75993 17.5649 6.62992 18.2549 7.69992C18.4349 7.98992 18.8149 8.05993 19.0949 7.86993C19.3749 7.67992 19.4449 7.28993 19.2649 7.00993C18.4649 5.77993 17.3849 4.76993 16.1149 4.06993C15.0249 3.45993 13.8249 3.10993 12.5949 3.01993C12.5149 2.99993 12.4349 2.98993 12.3449 3.00993H11.9849H11.6249C11.5449 2.99993 11.4549 3.00993 11.3749 3.01993C10.1449 3.10993 8.95487 3.45993 7.86487 4.05993C6.59487 4.75993 5.51487 5.76993 4.71487 6.99993C4.53487 7.28993 4.60487 7.66993 4.88487 7.85993C5.16487 8.04993 5.53487 7.96993 5.72487 7.68993ZM18.2651 16.3099C17.5751 17.3699 16.6451 18.2399 15.5451 18.8499C14.9251 19.1899 14.2551 19.4399 13.5651 19.5899C14.0051 18.7099 14.3751 17.7899 14.6651 16.8399C14.7651 16.5099 14.5851 16.1699 14.2651 16.0599C13.9451 15.9599 13.6051 16.1399 13.5151 16.4699C13.1751 17.6199 12.6951 18.7199 12.1051 19.7599H11.9951H11.8851C11.2851 18.7299 10.8151 17.6199 10.4751 16.4699C10.3798 16.1553 10.0662 15.977 9.76852 16.0478C9.80629 16.2929 9.82588 16.5441 9.82588 16.7998C9.82588 17.1917 9.77988 17.5728 9.69298 17.9381C9.90466 18.5021 10.1469 19.0534 10.4151 19.5899C10.0016 19.4987 9.5917 19.3705 9.19454 19.2075C8.98343 19.581 8.72472 19.924 8.42665 20.2283C9.36181 20.6591 10.3596 20.9149 11.3851 20.9899C11.4651 21.0099 11.5551 21.0199 11.6351 20.9999H11.9951H12.3551C12.4351 21.0099 12.5251 20.9999 12.6051 20.9899C13.8351 20.8999 15.0351 20.5499 16.1251 19.9499C17.3951 19.2499 18.4751 18.2399 19.2751 17.0099C19.4551 16.7299 19.3851 16.3399 19.1051 16.1499C18.8251 15.9599 18.4551 16.0399 18.2651 16.3199V16.3099ZM8.57502 13.1099C8.53308 13.2035 8.48594 13.2929 8.43359 13.3784C8.13676 13.0742 7.80067 12.8084 7.4335 12.5892C7.46118 12.4433 7.47502 12.2835 7.47502 12.1099V11.8799C7.47502 11.6299 7.44502 11.4099 7.38502 11.2199C7.32502 11.0299 7.24502 10.8699 7.13502 10.7399C7.02502 10.6099 6.88502 10.5099 6.72502 10.4499C6.56502 10.3799 6.37502 10.3499 6.16502 10.3499H5.65502V11.9537C5.41713 11.9182 5.17365 11.8998 4.92588 11.8998C4.74651 11.8998 4.5694 11.9095 4.39502 11.9283V9.48993H6.17502C6.55502 9.48993 6.90502 9.53993 7.21502 9.65993C7.53502 9.77993 7.80502 9.93993 8.03502 10.1599C8.26502 10.3699 8.44502 10.6299 8.57502 10.9199C8.70502 11.2099 8.76502 11.5399 8.76502 11.8999V12.1299C8.76502 12.4899 8.70502 12.8099 8.57502 13.1099ZM13.0751 12.7399L10.9451 9.46991H9.68506V14.5299H10.9451V11.2599L13.0651 14.5299H14.3251V9.46991H13.0751V12.7399ZM18.5148 11.82C18.7448 11.92 18.9448 12.04 19.1048 12.17H19.1248C19.2848 12.3 19.4048 12.45 19.4848 12.62C19.5648 12.79 19.6048 12.98 19.6048 13.19C19.6048 13.42 19.5548 13.62 19.4548 13.79C19.3548 13.97 19.2148 14.12 19.0348 14.24C18.8548 14.36 18.6348 14.45 18.3848 14.51C18.1248 14.57 17.8448 14.6 17.5348 14.6C17.2548 14.6 16.9748 14.56 16.6948 14.5C16.4148 14.43 16.1648 14.33 15.9448 14.19C15.7248 14.05 15.5448 13.88 15.4148 13.67C15.2848 13.45 15.2148 13.2 15.2148 12.91H16.4748C16.4748 13.06 16.4948 13.19 16.5448 13.3C16.5948 13.4 16.6648 13.49 16.7548 13.55C16.8548 13.62 16.9648 13.66 17.0948 13.69C17.2248 13.72 17.3748 13.73 17.5348 13.73C17.7248 13.73 17.8748 13.71 17.9948 13.66C18.1148 13.61 18.1948 13.54 18.2548 13.46C18.3148 13.37 18.3448 13.28 18.3448 13.18C18.3448 13.09 18.3348 13.02 18.3048 12.95C18.2848 12.88 18.2248 12.82 18.1548 12.76C18.0748 12.71 17.9748 12.65 17.8348 12.59C17.6948 12.53 17.5148 12.47 17.2948 12.41C17.0448 12.34 16.8048 12.25 16.5748 12.16C16.3448 12.07 16.1448 11.96 15.9648 11.83C15.7848 11.7 15.6448 11.56 15.5448 11.39C15.4448 11.23 15.3948 11.02 15.3948 10.81C15.3948 10.6 15.4448 10.4 15.5548 10.23C15.6548 10.05 15.8048 9.89995 15.9948 9.77995C16.1848 9.64995 16.4048 9.54995 16.6648 9.48995C16.9248 9.41995 17.2048 9.38995 17.5148 9.38995C17.9348 9.38995 18.2948 9.45995 18.6048 9.58995C18.9148 9.71995 19.1548 9.89995 19.3348 10.14C19.5048 10.38 19.5948 10.65 19.5948 10.96H18.3448C18.3448 10.82 18.3048 10.7 18.2448 10.6C18.1748 10.49 18.0848 10.41 17.9548 10.35C17.8248 10.29 17.6648 10.26 17.4748 10.26C17.2848 10.26 17.1348 10.29 17.0048 10.34C16.8848 10.39 16.7848 10.45 16.7248 10.54C16.6648 10.62 16.6348 10.72 16.6348 10.82C16.6348 10.9 16.6548 10.97 16.7048 11.04C16.7548 11.1 16.8248 11.16 16.9148 11.22C17.0048 11.28 17.1248 11.33 17.2548 11.38C17.3588 11.428 17.482 11.4632 17.6142 11.5009L17.6145 11.501C17.6474 11.5104 17.6809 11.52 17.7148 11.53C18.0148 11.62 18.2848 11.72 18.5148 11.82ZM6.44482 20.4398C5.96891 20.65 5.46533 20.7552 4.93408 20.7552C4.38623 20.7552 3.87435 20.6528 3.39844 20.4481C2.92253 20.2433 2.50195 19.9583 2.13672 19.5931C1.77148 19.2278 1.48649 18.8073 1.28174 18.3314C1.07699 17.8554 0.974609 17.3436 0.974609 16.7957C0.974609 16.0763 1.15446 15.4178 1.51416 14.8201C1.87386 14.2225 2.35254 13.7438 2.9502 13.3841C3.54785 13.0244 4.20915 12.8445 4.93408 12.8445C5.64795 12.8445 6.30371 13.0244 6.90137 13.3841C7.50456 13.7438 7.98324 14.2225 8.3374 14.8201C8.6971 15.4178 8.87695 16.0763 8.87695 16.7957C8.87695 17.338 8.77181 17.8471 8.56152 18.3231C8.35677 18.799 8.07178 19.2195 7.70654 19.5848C7.34131 19.95 6.92074 20.235 6.44482 20.4398ZM4.46924 19.1282C4.59652 19.2555 4.7487 19.3192 4.92578 19.3192C5.10286 19.3192 5.25228 19.2555 5.37402 19.1282C5.5013 19.001 5.56494 18.8488 5.56494 18.6717C5.56494 18.4946 5.5013 18.3424 5.37402 18.2151C5.25228 18.0879 5.10286 18.0242 4.92578 18.0242C4.7487 18.0242 4.59652 18.0879 4.46924 18.2151C4.34196 18.3424 4.27832 18.4946 4.27832 18.6717C4.27832 18.8488 4.34196 19.001 4.46924 19.1282ZM4.60205 17.3519C4.68506 17.4349 4.79297 17.4764 4.92578 17.4764C5.05859 17.4764 5.1665 17.4349 5.24951 17.3519C5.33252 17.2689 5.37402 17.1637 5.37402 17.0364L5.44043 14.7703C5.44043 14.6154 5.39339 14.4909 5.29932 14.3968C5.20524 14.2972 5.08073 14.2474 4.92578 14.2474C4.7653 14.2474 4.63802 14.2972 4.54395 14.3968C4.44987 14.4909 4.4056 14.6154 4.41113 14.7703L4.46924 17.0364C4.47477 17.1637 4.51904 17.2689 4.60205 17.3519Z" - fill={props.fill ?? PA_Colors.grey[50]} + fill={props.fill ?? greyPalette[50]} /> diff --git a/packages/open-ui-kit/src/custom-icons/DataLabel.tsx b/packages/open-ui-kit/src/custom-icons/DataLabel.tsx index 4ba6bad..ae4c24c 100644 --- a/packages/open-ui-kit/src/custom-icons/DataLabel.tsx +++ b/packages/open-ui-kit/src/custom-icons/DataLabel.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function DataLabel(props: SvgIconProps) { return ( @@ -31,7 +31,7 @@ export function DataLabel(props: SvgIconProps) { diff --git a/packages/open-ui-kit/src/custom-icons/GCPCategory_Storage.tsx b/packages/open-ui-kit/src/custom-icons/GCPCategory_Storage.tsx index 702a988..1395edf 100644 --- a/packages/open-ui-kit/src/custom-icons/GCPCategory_Storage.tsx +++ b/packages/open-ui-kit/src/custom-icons/GCPCategory_Storage.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function GCPCategoryStorage(props: SvgIconProps) { return ( @@ -27,11 +27,11 @@ export function GCPCategoryStorage(props: SvgIconProps) { fill="none" > ( @@ -28,13 +28,13 @@ export const InsecureConfiguration = (props: SvgIconProps) => ( > diff --git a/packages/open-ui-kit/src/custom-icons/KubernetesCategory_None.tsx b/packages/open-ui-kit/src/custom-icons/KubernetesCategory_None.tsx index fa7b281..c67276d 100644 --- a/packages/open-ui-kit/src/custom-icons/KubernetesCategory_None.tsx +++ b/packages/open-ui-kit/src/custom-icons/KubernetesCategory_None.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function KubernetesCategoryNone(props: SvgIconProps) { return ( @@ -27,7 +27,7 @@ export function KubernetesCategoryNone(props: SvgIconProps) { fill="none" > diff --git a/packages/open-ui-kit/src/custom-icons/ManualDataLabeling.tsx b/packages/open-ui-kit/src/custom-icons/ManualDataLabeling.tsx index 8ceb513..f359eb4 100644 --- a/packages/open-ui-kit/src/custom-icons/ManualDataLabeling.tsx +++ b/packages/open-ui-kit/src/custom-icons/ManualDataLabeling.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function ManualDataLabeling(props: SvgIconProps) { return ( @@ -34,23 +34,23 @@ export function ManualDataLabeling(props: SvgIconProps) { fillRule="evenodd" clipRule="evenodd" d="M15.1714 4.09554C13.8714 3.51554 12.2814 3.22554 10.4514 3.22554C8.62145 3.22554 7.03145 3.51554 5.73145 4.09554C4.40145 4.68554 3.73145 5.41554 3.73145 6.26554V13.6255C3.73145 14.4855 4.40145 15.2155 5.71145 15.8055C6.85515 16.3109 8.23467 16.5962 9.8291 16.6544V14.9765C9.46461 14.9569 9.09905 14.9199 8.73145 14.8655C8.15145 14.7755 7.61145 14.6655 7.12145 14.5255C6.64145 14.3855 6.23145 14.2355 5.92145 14.0655C5.63145 13.9155 5.45145 13.7555 5.39145 13.6055V11.9755C5.66145 12.1155 5.96145 12.2455 6.29145 12.3655C6.67145 12.4955 7.09145 12.6155 7.53145 12.7055C7.96145 12.7955 8.43145 12.8655 8.93145 12.9155C9.91145 13.0155 10.9914 13.0155 11.9514 12.9155C12.2434 12.8851 12.5317 12.8473 12.8096 12.8021V11.1161C12.5243 11.164 12.2299 11.2038 11.9314 11.2355C10.9914 11.3355 9.92144 11.3355 8.95145 11.2355C8.47145 11.1855 8.00145 11.1155 7.57145 11.0255C7.13145 10.9355 6.73145 10.8155 6.36145 10.6855C6.01145 10.5655 5.69145 10.4155 5.40145 10.2655V8.28554C5.67145 8.42554 5.97145 8.55554 6.30145 8.67554C6.68145 8.81554 7.10145 8.92554 7.54145 9.01554C7.97145 9.10554 8.45145 9.17554 8.94145 9.22554C9.93145 9.32554 10.9914 9.32554 11.9614 9.22554C12.4414 9.17554 12.9114 9.10554 13.3414 9.01554C13.7714 8.92554 14.1914 8.80554 14.5914 8.67554C14.9214 8.55554 15.2314 8.42554 15.5114 8.28554V9.75462H17.1714V6.26554C17.1714 5.41554 16.5014 4.68554 15.1714 4.09554ZM13.7214 7.18554C11.5214 7.80554 9.29145 7.79554 7.20145 7.18554C6.20145 6.90554 5.61145 6.59554 5.42145 6.26554C5.61145 5.94554 6.21145 5.63554 7.20145 5.34554C9.31145 4.73554 11.5514 4.72554 13.7314 5.34554C14.9814 5.70554 15.3914 6.03554 15.5014 6.26554C15.3914 6.48554 14.9814 6.81554 13.7214 7.17554V7.18554Z" - fill={props.fill ?? PA_Colors.grey[50]} + fill={props.fill ?? greyPalette[50]} /> diff --git a/packages/open-ui-kit/src/custom-icons/NeglectedResource.tsx b/packages/open-ui-kit/src/custom-icons/NeglectedResource.tsx index 8302a80..678f296 100644 --- a/packages/open-ui-kit/src/custom-icons/NeglectedResource.tsx +++ b/packages/open-ui-kit/src/custom-icons/NeglectedResource.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export const NeglectedResource = (props: SvgIconProps) => ( @@ -28,29 +28,29 @@ export const NeglectedResource = (props: SvgIconProps) => ( > diff --git a/packages/open-ui-kit/src/custom-icons/OracleCategory_None.tsx b/packages/open-ui-kit/src/custom-icons/OracleCategory_None.tsx index 75918ee..f442a40 100644 --- a/packages/open-ui-kit/src/custom-icons/OracleCategory_None.tsx +++ b/packages/open-ui-kit/src/custom-icons/OracleCategory_None.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function OracleCategoryNone(props: SvgIconProps) { return ( @@ -27,7 +27,7 @@ export function OracleCategoryNone(props: SvgIconProps) { fill="none" > diff --git a/packages/open-ui-kit/src/custom-icons/RuleBasedDataLabeling.tsx b/packages/open-ui-kit/src/custom-icons/RuleBasedDataLabeling.tsx index 3567ddd..33882a2 100644 --- a/packages/open-ui-kit/src/custom-icons/RuleBasedDataLabeling.tsx +++ b/packages/open-ui-kit/src/custom-icons/RuleBasedDataLabeling.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function RuleBasedDataLabeling(props: SvgIconProps) { return ( @@ -29,11 +29,11 @@ export function RuleBasedDataLabeling(props: SvgIconProps) { > diff --git a/packages/open-ui-kit/src/custom-icons/SecretExposure.tsx b/packages/open-ui-kit/src/custom-icons/SecretExposure.tsx index aa25079..c5b21af 100644 --- a/packages/open-ui-kit/src/custom-icons/SecretExposure.tsx +++ b/packages/open-ui-kit/src/custom-icons/SecretExposure.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export const SecretExposure = (props: SvgIconProps) => ( @@ -28,25 +28,25 @@ export const SecretExposure = (props: SvgIconProps) => ( > diff --git a/packages/open-ui-kit/src/custom-icons/SecurityPostureIcon.tsx b/packages/open-ui-kit/src/custom-icons/SecurityPostureIcon.tsx index fa1f05f..c5e930c 100644 --- a/packages/open-ui-kit/src/custom-icons/SecurityPostureIcon.tsx +++ b/packages/open-ui-kit/src/custom-icons/SecurityPostureIcon.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { grey50 } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function SecurityPostureIcon(props: SvgIconProps) { return ( @@ -31,8 +31,8 @@ export function SecurityPostureIcon(props: SvgIconProps) { diff --git a/packages/open-ui-kit/src/custom-icons/SensitiveData.tsx b/packages/open-ui-kit/src/custom-icons/SensitiveData.tsx index 344acb0..dee49cd 100644 --- a/packages/open-ui-kit/src/custom-icons/SensitiveData.tsx +++ b/packages/open-ui-kit/src/custom-icons/SensitiveData.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function SensitiveData(props: SvgIconProps) { return ( @@ -29,15 +29,15 @@ export function SensitiveData(props: SvgIconProps) { > diff --git a/packages/open-ui-kit/src/custom-icons/Settings.tsx b/packages/open-ui-kit/src/custom-icons/Settings.tsx index 60daf5e..0a1b220 100644 --- a/packages/open-ui-kit/src/custom-icons/Settings.tsx +++ b/packages/open-ui-kit/src/custom-icons/Settings.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function Settings(props: SvgIconProps) { return ( @@ -27,7 +27,7 @@ export function Settings(props: SvgIconProps) { fill="none" > diff --git a/packages/open-ui-kit/src/custom-icons/VulnerabilitiesIcon.tsx b/packages/open-ui-kit/src/custom-icons/VulnerabilitiesIcon.tsx index a42c136..6b5c935 100644 --- a/packages/open-ui-kit/src/custom-icons/VulnerabilitiesIcon.tsx +++ b/packages/open-ui-kit/src/custom-icons/VulnerabilitiesIcon.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { grey50 } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function VulnerabilitiesIcon(props: SvgIconProps) { return ( @@ -31,7 +31,7 @@ export function VulnerabilitiesIcon(props: SvgIconProps) { fillRule="evenodd" clipRule="evenodd" d="M5.42258 3.82031C4.71449 3.82031 4.14047 4.39433 4.14047 5.10242V12.731C4.14047 23.8199 13.4554 27.501 15.2696 28.113C15.5357 28.2028 15.824 28.2027 16.0901 28.1128C16.4017 28.0074 16.8888 27.8279 17.4885 27.5575C17.553 27.5285 17.6188 27.4983 17.6858 27.4671C17.8435 27.3937 18.008 27.3143 18.1784 27.2287C18.3988 27.1179 18.6292 26.9965 18.8672 26.864C19.4859 26.5196 19.7083 25.7389 19.3639 25.1202C19.0195 24.5015 18.2387 24.2792 17.62 24.6236C17.4149 24.7377 17.2165 24.8423 17.0268 24.9376C16.8801 25.0114 16.7387 25.0796 16.6035 25.1425C16.5461 25.1693 16.4897 25.1951 16.4345 25.22C16.1457 25.3502 15.8902 25.4545 15.6786 25.5355C13.4323 24.6798 6.70468 21.3896 6.70468 12.731V6.38452H24.6542V12.154C24.6542 12.8621 25.2282 13.4361 25.9363 13.4361C26.6443 13.4361 27.2184 12.8621 27.2184 12.154V5.10242C27.2184 4.39433 26.6443 3.82031 25.9363 3.82031H5.42258ZM23.9196 15.2334C23.9196 14.5155 23.3376 13.9336 22.6198 13.9336C21.9019 13.9336 21.32 14.5155 21.32 15.2334V16.1047C20.8633 16.2662 20.4456 16.5103 20.085 16.8191L19.3296 16.3829C18.7079 16.024 17.913 16.237 17.554 16.8587C17.1951 17.4804 17.4081 18.2753 18.0298 18.6343L18.7853 19.0704C18.7427 19.3012 18.7204 19.5391 18.7204 19.7822C18.7204 20.026 18.7428 20.2645 18.7856 20.4959L18.03 20.9321C17.4083 21.291 17.1953 22.086 17.5543 22.7077C17.9132 23.3294 18.7082 23.5424 19.3298 23.1834L20.0864 22.7466C20.4467 23.0548 20.8639 23.2985 21.32 23.4597V24.3321C21.32 25.0499 21.9019 25.6319 22.6198 25.6319C23.3376 25.6319 23.9196 25.0499 23.9196 24.3321V23.4598C24.3756 23.2986 24.7928 23.055 25.153 22.7469L25.9095 23.1836C26.5311 23.5425 27.3261 23.3295 27.685 22.7078C28.044 22.0862 27.831 21.2912 27.2093 20.9323L26.4541 20.4963C26.4969 20.2648 26.5193 20.0261 26.5193 19.7822C26.5193 19.539 26.497 19.301 26.4544 19.0701L27.2095 18.6341C27.8312 18.2752 28.0442 17.4802 27.6853 16.8585C27.3263 16.2368 26.5314 16.0238 25.9097 16.3828L25.1545 16.8188C24.7939 16.5101 24.3762 16.2661 23.9196 16.1047V15.2334ZM23.7158 19.7824C23.7158 20.3878 23.225 20.8786 22.6196 20.8786C22.0142 20.8786 21.5234 20.3878 21.5234 19.7824C21.5234 19.177 22.0142 18.6862 22.6196 18.6862C23.225 18.6862 23.7158 19.177 23.7158 19.7824Z" - fill={grey50} + fill={greyPalette[50]} /> diff --git a/packages/open-ui-kit/src/custom-icons/menu_attackpathanalysis.tsx b/packages/open-ui-kit/src/custom-icons/menu_attackpathanalysis.tsx index 95df190..72edd36 100644 --- a/packages/open-ui-kit/src/custom-icons/menu_attackpathanalysis.tsx +++ b/packages/open-ui-kit/src/custom-icons/menu_attackpathanalysis.tsx @@ -15,7 +15,7 @@ */ import { SvgIcon, SvgIconProps } from "@mui/material"; -import { PA_Colors } from "../theme/dark/dark-color-palette"; +import { greyPalette } from "@/theme/color-palette"; export function MenuAttackPathAnalysis(props: SvgIconProps) { return ( @@ -27,13 +27,13 @@ export function MenuAttackPathAnalysis(props: SvgIconProps) { fill="none" > ({ - borderRadius: "4px", - borderTop: `1px solid ${borderColor}`, - borderRight: `1px solid ${borderColor}`, - borderBottom: `1px solid ${borderColor}`, - borderLeft: `4px solid ${borderColor}`, - background: PA_Colors.surface["500"], - boxShadow: shadows[5], - ".MuiAlert-icon": { - color: borderColor, - }, -}); - const theme: Theme = createTheme({ breakpoints: { keys: ["md", "lg", "xl", "xxl"], @@ -124,533 +112,58 @@ const theme: Theme = createTheme({ palette, typography, mixins: commonMixins, - components: { - MuiButton: { - styleOverrides: { - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - /* @ts-ignore */ - outlinedNegative: { color: bordeauxPalette.text }, - textNegative: { color: bordeauxPalette.text }, - }, - }, - }, }); const darkThemeOptions: ThemeOptions = { shadows, components: { - MuiAppBar: { - styleOverrides: { - colorPrimary: { - backgroundColor: "rgba(255, 255, 255, 0.04)", - }, - root: { - paddingTop: "16px", - paddingBottom: "16px", - }, - }, - }, - MuiAvatar: { - styleOverrides: { - root: { backgroundColor: theme.palette.grey[700] }, - }, - }, - MuiCheckbox: { - defaultProps: { - icon: , - checkedIcon: , - indeterminateIcon: , - }, - variants: [ - { - props: { color: "error" }, - style: { - "&:hover": { - backgroundColor: "rgba(255, 133, 132, 0.18)", - }, - }, - }, - { - props: { color: "success" }, - style: { - "&:hover": { - backgroundColor: "rgba(99, 245, 194, 0.18)", - }, - }, - }, - { - props: { color: "warning" }, - style: { - "&:hover": { - backgroundColor: "rgba(249, 189, 48, 0.18)", - }, - }, - }, - ], - styleOverrides: { - root: { - "&.MuiCheckbox-colorError, &.MuiCheckbox-colorSuccess, &.MuiCheckbox-colorWarning": - { - ...commonCheckboxStyles, - "&:not(.Mui-checked, .MuiCheckbox-indeterminate)": { - color: theme.palette.grey[300], - }, - }, - }, - colorPrimary: { - ...commonCheckboxStyles, - color: theme.palette.grey[300], - "&.Mui-disabled": { - color: theme.palette.grey[500], - "& + *": { - color: theme.palette.grey[300], - }, - }, - "&:hover": { - backgroundColor: "rgba(31, 210, 255, 0.25)", - "&:not(.Mui-checked, .MuiCheckbox-indeterminate)": { - backgroundColor: "rgba(119, 125, 133, 0.2)", - }, - }, - }, - colorSecondary: { - ...commonCheckboxStyles, - color: theme.palette.grey[300], - "&:hover": { - backgroundColor: "rgba(199, 155, 255, 0.25)", - }, - }, - }, - }, - ...getInputSharedStyle(theme), - MuiTooltip: { - defaultProps: { - arrow: true, - placement: "top", - }, - styleOverrides: { - arrow: { - color: surface200, - }, - tooltip: { - ...typography.caption, - color: grey50, - backgroundColor: surface200, - display: "flex", - justifyContent: "center", - alignItems: "center", - padding: "2px 8px", - lineHeight: "16px", - }, - }, - }, - MuiDrawer: { - styleOverrides: { - paper: { - background: PA_Colors.surface[700], - backgroundImage: "none", - color: theme.palette.grey["50"], - }, - modal: { - "& .MuiBackdrop-root": { - background: `rgba(21, 29, 40, 0.50)`, // TODO add backdrop in surface - }, - }, - }, - defaultProps: { - elevation: 0, - }, - }, - MuiTabs: { - styleOverrides: { - scrollButtons: { - "& svg": { - fill: palette.text?.secondary, - }, - }, - }, - }, - MuiStepIcon: { - styleOverrides: { - root: { - "&.Mui-completed": { - color: theme.palette.success.main, - }, - "&.Mui-error": { - color: theme.palette.error.main, - }, - "&.Mui-disabled": { - color: theme.palette.text.disabled, - }, - }, - }, - }, - MuiStepConnector: { - styleOverrides: { - lineHorizontal: { - background: - "linear-gradient(86.04deg, rgba(72, 122, 215, 0.45) 0%, rgba(75, 204, 208, 0.45) 100%)", - height: 1, - borderRadius: 1, - backgroundClip: "padding-box", - borderTopStyle: "none", - }, - lineVertical: { - background: - "linear-gradient(86.04deg, rgba(72, 122, 215, 0.45) 0%, rgba(75, 204, 208, 0.45) 100%)", - width: 1, - borderRadius: 1, - backgroundClip: "padding-box", - borderLeftStyle: "none", - }, - }, - }, - MuiStepLabel: { - styleOverrides: { - label: { - "&.Mui-disabled": { - color: theme.palette.text.disabled, - }, - "&.Mui-error": { - color: theme.palette.error.main, - }, - "&.MuiStepLabel-completed": { - color: theme.palette.success.main, - }, - }, - }, - }, - MuiSelect: { - defaultProps: { - IconComponent: TriangleUpOutline, - MenuProps: { - PaperProps: { - sx: { - marginTop: "4px", - }, - }, - }, - }, - styleOverrides: { - standard: { - backgroundColor: theme.palette.background.paper, - }, - icon: { - color: theme.palette.text.secondary, - transform: "rotate(180deg)", - paddingLeft: "6px", - width: "auto", - }, - iconOpen: { - transform: "rotate(0deg)", - paddingRight: "6px", - }, - filled: { - backgroundColor: "#243E5E", - }, - }, - }, - MuiMenu: { - defaultProps: { - elevation: 4, - }, - styleOverrides: { - paper: { - backgroundImage: "none", - backgroundColor: PA_Colors.surface[500], - padding: "8px 0px", - }, - }, - }, - MuiMenuItem: { - styleOverrides: { - root: { - ...theme.typography.body2, - padding: "8px 16px", - minHeight: "40px", - backgroundColor: PA_Colors.surface[500], - "&:hover, &.MuiMenuItem-root.Mui-selected, &.Mui-selected:hover": { - backgroundColor: PA_Colors.surface[300], - }, - "&.Mui-selected": { - color: PA_Colors.primary[500], - }, - }, - }, - }, - MuiBadge: { - styleOverrides: { - badge: { - color: theme.palette.text.primary, - "&.MuiBadge-standard": { - height: "16px", - borderRadius: "64px", - }, - "&.MuiBadge-colorPrimary": { - backgroundColor: theme.palette.primary["900"], - }, - "&.MuiBadge-colorSecondary": { - backgroundColor: theme.palette.secondary["500"], - }, - "&.MuiBadge-colorError": { - backgroundColor: bordeauxPalette["500"], - }, - "&.MuiBadge-colorWarning": { - backgroundColor: redPalette["500"], - }, - }, - }, - }, - MuiAlert: { + ...appBarComponent(theme), + ...accordionComponent(theme), + ...avatarComponent(theme), + ...avatarGroupComponent(theme), + ...buttonComponent(theme), + ...cardComponent(theme), + ...checkboxComponent(theme), + ...circularProgressComponent(theme), + ...dialogComponent(theme), + ...dividerComponent(theme), + ...inputComponents(theme), + ...listComponent(theme), + ...menuComponent(theme), + ...popoverComponent(theme), + ...radioComponent(theme), + ...skeletonComponent(theme), + ...snackbarComponent(theme), + ...switchComponent(theme), + ...tabComponent(theme), + ...tabsComponent(theme), + ...tooltipComponent(theme), + + MuiCssBaseline: { styleOverrides: { - message: { - color: grey50, - }, - action: { - paddingTop: "0px", - display: "flex", - alignItems: "center", - flexWrap: "wrap", + html: { + scrollbarWidth: "thin", + scrollbarColor: `${theme.palette.vars.baseTextMedium} ${theme.palette.background.default}`, }, - root: { - "& .MuiButtonBase-root": { - color: grey200, - }, + "*::-webkit-scrollbar": { + width: "12px", + height: "12px", }, - }, - variants: [ - { - props: { severity: "error" }, - style: getAlertStylesForSeverity(PA_Colors.bordeaux["500"]), + "*::-webkit-scrollbar-track": { + backgroundColor: theme.palette.background.default, + borderRadius: 8, }, - { - props: { severity: "info" }, - style: - theme.palette.info["500"] && - getAlertStylesForSeverity(theme.palette.info["500"]), + "*::-webkit-scrollbar-thumb": { + backgroundColor: theme.palette.vars.controlIconMedium, + borderRadius: 8, + border: "2px solid transparent", + backgroundClip: "content-box", }, - { - props: { severity: "success" }, - style: - theme.palette.success["500"] && - getAlertStylesForSeverity(theme.palette.success["500"]), + "*::-webkit-scrollbar-thumb:hover": { + backgroundColor: theme.palette.vars.baseTextMedium, }, - { - props: { severity: "warning" }, - style: getAlertStylesForSeverity(theme.palette.orange.main), - }, - ], - }, - MuiList: { - defaultProps: { - disablePadding: true, - }, - }, - MuiListItem: { - styleOverrides: { - root: listItemCommonStyles(theme), - }, - }, - MuiListItemButton: { - styleOverrides: { - root: listItemCommonStyles(theme), - }, - }, - MuiButtonBase: { - defaultProps: { - disableRipple: true, - }, - }, - MuiButton: { - defaultProps: { - disableElevation: true, - }, - styleOverrides: { - root: { - color: grey50, - textTransform: "none", - transition: "none", - "& .MuiButton-startIcon": { - marginLeft: "0px", - }, - // handle icon only buttons - "&:has(>svg:only-child )": { - "&.MuiButton-sizeLarge": { - padding: "8px", - minWidth: "40px", - width: "40px", - }, - "&.MuiButton-sizeMedium": { - padding: "6px", - minWidth: "32px", - width: "32px", - }, - "&.MuiButton-sizeSmall": { - padding: "2px", - minWidth: "24px", - width: "24px", - }, - }, - "& .MuiButton-endIcon": { - marginRight: "0px", - }, - "&.MuiButton-sizeLarge": { - ...typography.subtitle1, - height: "40px", - }, - "&.MuiButton-sizeMedium": { - ...typography.subtitle2, - height: "32px", - }, - "&.MuiButton-sizeLarge svg": { - fontSize: "24px", - }, - "&.MuiButton-sizeMedium svg, &.MuiButton-sizeSmall svg": { - fontSize: "20px", - }, - "&.MuiButton-containedSizeLarge, &.MuiButton-containedSizeMedium": { - paddingRight: "16px", - paddingLeft: "16px", - "&:active": { - paddingRight: "15px", - paddingLeft: "15px", - }, - }, - "&.MuiButton-sizeSmall": { - ...typography.subtitle2, - height: "24px", - padding: "2px 12px", - "&.MuiButton-containedSizeSmall:active": { - paddingRight: "11px", - paddingLeft: "11px", - }, - }, - "&.Mui-focusVisible": { - outline: `2px solid ${secondary200}`, - outlineOffset: "2px", - }, - "&.MuiButton-contained.Mui-disabled": { - opacity: 0.35, - color: grey50, - }, - "&.MuiButton-containedPrimary": { - background: PA_Colors.gradients.light, - "&:hover": { - background: PA_Colors.gradients.light_hover, - }, - "&:active": { - background: `${PA_Colors.gradients.light_pressed} padding-box, ${PA_Colors.gradients.light} border-box`, - border: "1px solid #0000", - borderRadius: "4px", - }, - }, - "&.MuiButton-containedSecondary": { - background: PA_Colors.gradients.dark, - "&:hover": { - background: PA_Colors.gradients.dark_hover, - }, - "&:active": { - background: `${PA_Colors.gradients.dark_pressed} padding-box, ${PA_Colors.gradients.dark} border-box`, - border: "1px solid #0000", - borderRadius: "4px", - }, - }, - "&.MuiButton-outlined": { - borderColor: surface200, - background: "none", - "&:hover": { - background: "none", - color: grey200, - borderColor: surface50, - }, - "&:active": { - borderColor: surface200, - }, - "&.Mui-disabled": { - color: grey500, - borderColor: surface500, - }, - }, - "&.MuiButton-text": { - "&:hover": { - background: "none", - color: grey200, - }, - "&:active": { - color: grey50, - }, - "&.Mui-disabled": { - color: grey500, - }, - }, - }, - }, - }, - MuiSnackbar: { - styleOverrides: { - anchorOriginTopRight: snackbarTopRightCommonStyles, - root: { - "& .MuiSnackbarContent-root": { - backgroundColor: surface500, - backgroundImage: "none", - color: grey50, - }, - "& .MuiButtonBase-root": { - color: "#9ea2a8", - }, - }, - }, - }, - MuiFormGroup: { - styleOverrides: { - root: { - "& .MuiFormControlLabel-root": { - "& .MuiCheckbox-root": { - "& + *": { - marginLeft: 8, - }, - }, - }, - }, - }, - }, - MuiPaginationItem: { - defaultProps: { - slots: { - previous: KeyboardArrowLeft, - next: KeyboardArrowRight, - first: SkipPrevious, - last: SkipNext, - }, - }, - styleOverrides: { - root: { - "&.MuiPaginationItem-text:not(.MuiPaginationItem-ellipsis)": { - "&.Mui-selected, :hover, :active": { - backgroundColor: PA_Colors.surface[50], - }, - }, - "&.MuiPaginationItem-text.MuiPaginationItem-textPrimary:not(.MuiPaginationItem-ellipsis)": - { - "&.Mui-selected, :hover, :active": { - backgroundColor: PA_Colors.primary[500], - color: PA_Colors.surface[900], - }, - }, - "&.MuiPaginationItem-outlined:not(.MuiPaginationItem-ellipsis)": { - border: `1px solid ${PA_Colors.surface[200]}`, - "&.Mui-selected, :hover, :active": { - backgroundColor: `rgba(56, 77, 107, 0.20)`, - }, - }, - "&.MuiPaginationItem-outlined.MuiPaginationItem-outlinedPrimary:not(.MuiPaginationItem-ellipsis)": - { - "&.Mui-selected, :hover, :active": { - border: `1px solid rgba(31, 210, 255, 0.40)`, - backgroundColor: `rgba(0, 188, 235, 0.10)`, - color: PA_Colors.primary[500], - }, - }, + "*::-webkit-scrollbar-corner": { + backgroundColor: theme.palette.background.default, }, }, }, diff --git a/packages/open-ui-kit/src/theme/dark/dark-vars.ts b/packages/open-ui-kit/src/theme/dark/dark-vars.ts new file mode 100644 index 0000000..856cc75 --- /dev/null +++ b/packages/open-ui-kit/src/theme/dark/dark-vars.ts @@ -0,0 +1,350 @@ +/* + * Copyright 2025 Open UI Kit Contributors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { VarsType } from "@/types/vars"; +import { + surfaceLightPalette, + surfaceDarkPalette, + bluePalette, + greyPalette, + lightOrangePalette, + redPalette, + greenPalette, + lightBluePalette, + purplePalette, + orangePalette, + yellowPalette, + nightPalette, + sunsetPalette, + lavenderPalette, + limePalette, + pinkPalette, + tealPalette, +} from "../color-palette"; + +// NOTE: These values mirror the structure of light-vars, adapted for dark palette availability. +// Where the light theme used palettes not present in dark (e.g., lightBlue, purple, teal, etc.), +// the closest available palette has been used instead (e.g., blue, secondary, green). + +export const darkVars: VarsType = { + brandOrange: lightOrangePalette[500], + brandOrangeDark: lightOrangePalette[900], + brandBlue: bluePalette[500], + brandMidnightBlue: surfaceDarkPalette[500], + agentcyYellow: lightOrangePalette[500], + agentcyBlue: bluePalette[300], + agentcyDarkBlue: surfaceDarkPalette[900], + baseTextStrong: greyPalette[0], + baseTextDefault: greyPalette[50], + baseTextMedium: greyPalette[100], + baseTextWeak: greyPalette[200], + baseTextInverse: surfaceDarkPalette[900], + baseTextDisabled: greyPalette[300], + baseBackgroundStrong: surfaceDarkPalette[900], + baseBackgroundMedium: surfaceDarkPalette[600], + baseBackgroundWeak: surfaceDarkPalette[400], + baseBackgroundHover: surfaceDarkPalette[700], + baseBorderDefault: surfaceDarkPalette[200], + baseBorderStrong: surfaceDarkPalette[50], + baseBorderMedium: surfaceDarkPalette[100], + baseBorderWeak: surfaceDarkPalette[400], + brandIconPrimaryDefault: lightBluePalette[600], + brandIconPrimaryWeak: lightBluePalette[100], + brandIconPrimaryMedium: lightBluePalette[300], + brandIconPrimaryStrong: lightBluePalette[900], + brandIconSecondaryDefault: surfaceDarkPalette[50], + brandIconSecondaryWeak: surfaceLightPalette[400], + brandIconSecondaryMedium: surfaceLightPalette[900], + brandIconTertiaryDefault: lightOrangePalette[600], + brandIconTertiaryWeak: lightOrangePalette[100], + brandIconTertiaryMedium: lightOrangePalette[300], + brandBackgroundPrimaryDefault: bluePalette[300], + brandBackgroundPrimaryWeak: surfaceDarkPalette[500], + brandBackgroundPrimaryMedium: surfaceDarkPalette[300], + brandBackgroundSecondaryDefault: surfaceDarkPalette[500], + brandLogoPrimary: lightOrangePalette[600], + brandTextPrimary: lightBluePalette[600], + brandTextSecondary: surfaceLightPalette[100], + controlBackgroundDefault: surfaceDarkPalette[400], + controlBackgroundDisabled: surfaceDarkPalette[500], + controlBackgroundWeak: surfaceDarkPalette[500], + controlBackgroundMedium: surfaceDarkPalette[200], + controlBorderDefault: surfaceDarkPalette[50], + controlBorderStrong: surfaceDarkPalette[100], + controlBorderMedium: surfaceDarkPalette[200], + controlBorderWeak: surfaceDarkPalette[300], + controlBorderHover: lightBluePalette[800], + controlBorderActive: lightBluePalette[800], + controlBorderNegative: redPalette[500], + controlBorderDisabled: surfaceDarkPalette[300], + controlIconDefault: greyPalette[50], + controlIconStrong: greyPalette[0], + controlIconMedium: greyPalette[100], + controlIconWeak: greyPalette[200], + controlIconHover: lightBluePalette[800], + controlIconActive: lightBluePalette[800], + controlIconDisabled: greyPalette[300], + interactivePrimaryDefaultDefault: lightBluePalette[600], + interactivePrimaryDefaultHover: lightBluePalette[300], + interactivePrimaryDefaultActive: lightBluePalette[800], + interactivePrimaryDefaultDisabled: lightBluePalette["alpha40"], + interactivePrimaryWeakDefault: surfaceDarkPalette[600], + interactivePrimaryWeakHover: surfaceDarkPalette[300], + interactivePrimaryWeakActive: surfaceDarkPalette[400], + interactivePrimaryWeakDisabled: "#00142b19", + interactiveSecondaryDefaultDefault: surfaceLightPalette[300], + interactiveSecondaryDefaultHover: surfaceLightPalette[50], + interactiveSecondaryDefaultActive: surfaceLightPalette[600], + interactiveSecondaryDefaultDisabled: "#fbfcfe66", + interactiveSecondaryWeakDefault: surfaceDarkPalette[500], + interactiveSecondaryWeakHover: surfaceDarkPalette[300], + interactiveSecondaryWeakActive: surfaceDarkPalette[700], + interactiveSecondaryWeakDisabled: "#04193066", + interactiveInverseBackgroundDefault: surfaceLightPalette[900], + interactiveInverseBackgroundHover: surfaceLightPalette[500], + interactiveInverseBackgroundActive: surfaceLightPalette[800], + interactiveInverseBackgroundDisabled: "#c8d5f566", + interactiveInverseTextDefault: surfaceDarkPalette[900], + interactiveInverseTextHover: surfaceDarkPalette[500], + interactiveInverseTextActive: surfaceDarkPalette[800], + interactiveInverseTextDisabled: "#00142b19", + interactiveTextInDefault: greyPalette[0], + interactiveTextInHover: greyPalette[100], + interactiveTextInActive: greyPalette[50], + interactiveTextInDisabled: greyPalette[300], + interactiveTertiaryDefault: lightOrangePalette[600], + interactiveTertiaryHover: lightOrangePalette[300], + interactiveTertiaryActive: lightOrangePalette[700], + interactiveTertiaryDisabled: lightOrangePalette["alpha40"], + successBackgroundDefault: greenPalette[500], + successBackgroundDisabled: greenPalette[40], + successBackgroundHover: greenPalette[100], + successBackgroundActive: greenPalette[300], + successBackgroundWeak: greenPalette[10], + successIconActive: greenPalette[600], + successIconDisabled: greenPalette[40], + successIconHover: greenPalette[300], + successIconDefault: greenPalette[400], + successTextActive: greenPalette[300], + successTextHover: greenPalette[200], + successTextDefault: greenPalette[100], + successTextInDisabled: greenPalette[10], + successTextInDefault: greenPalette[50], + successBorderDisabled: greenPalette[40], + successBorderActive: greenPalette[600], + successBorderHover: greenPalette[300], + successBorderDefault: greenPalette[500], + successIconInDisabled: greenPalette[10], + successIconInActive: greenPalette[200], + successIconInHover: greenPalette[100], + successIconInDefault: greenPalette[50], + negativeBackgroundHover: redPalette[300], + negativeBackgroundActive: redPalette[600], + negativeBackgroundDisabled: redPalette["alpha40"], + negativeBackgroundDefault: redPalette[500], + negativeBackgroundWeak: redPalette["alpha10"], + negativeTextDefault: redPalette[100], + negativeTextHover: redPalette[200], + negativeTextActive: redPalette[300], + negativeBorderActive: redPalette[600], + negativeBorderHover: redPalette[300], + negativeBorderDisabled: redPalette["alpha40"], + negativeBorderDefault: redPalette[500], + negativeIconDisabled: redPalette["alpha40"], + negativeIconActive: redPalette[600], + negativeIconHover: redPalette[300], + negativeIconDefault: redPalette[400], + negativeTextInDefault: redPalette[50], + negativeTextInDisabled: redPalette["alpha10"], + negativeIconInDefault: redPalette[50], + negativeIconInHover: redPalette[100], + negativeIconInActive: redPalette[200], + negativeIconInDisabled: redPalette["alpha10"], + excellentBackgroundDefault: lightBluePalette[900], + excellentBackgroundWeak: lightBluePalette["alpha10"], + excellentBackgroundDisabled: lightBluePalette["alpha40"], + excellentBackgroundHover: lightBluePalette[600], + excellentBackgroundActive: lightBluePalette[800], + excellentTextDefault: lightBluePalette[50], + excellentTextHover: lightBluePalette[100], + excellentTextActive: lightBluePalette[200], + excellentTextInDefault: lightBluePalette[50], + excellentTextInDisabled: lightBluePalette["alpha10"], + excellentBorderDefault: lightBluePalette[700], + excellentBorderHover: lightBluePalette[400], + excellentBorderActive: lightBluePalette[900], + excellentBorderDisabled: lightBluePalette["alpha40"], + excellentIconDefault: lightBluePalette[700], + excellentIconHover: lightBluePalette[400], + excellentIconActive: lightBluePalette[900], + excellentIconDisabled: lightBluePalette["alpha40"], + excellentIconInDefault: lightBluePalette[50], + excellentIconInHover: lightBluePalette[100], + excellentIconInActive: lightBluePalette[200], + excellentIconInDisabled: lightBluePalette["alpha10"], + neutralBackgroundDefault: bluePalette[300], + neutralBackgroundWeak: bluePalette["alpha10"], + neutralBackgroundDisabled: bluePalette["alpha40"], + neutralBackgroundHover: bluePalette[400], + neutralBackgroundActive: bluePalette[500], + neutralTextDefault: bluePalette[50], + neutralTextHover: bluePalette[100], + neutralTextActive: bluePalette[200], + neutralTextInDefault: bluePalette[50], + neutralTextInDisabled: bluePalette["alpha10"], + neutralBorderDefault: bluePalette[300], + neutralBorderHover: bluePalette[200], + neutralBorderActive: bluePalette[500], + neutralBorderDisabled: bluePalette["alpha40"], + neutralIconDefault: bluePalette[300], + neutralIconHover: bluePalette[200], + neutralIconActive: bluePalette[500], + neutralIconDisabled: bluePalette["alpha40"], + neutralIconInDefault: bluePalette[50], + neutralIconInHover: bluePalette[100], + neutralIconInActive: bluePalette[200], + neutralIconInDisabled: bluePalette["alpha10"], + infoBackgroundDefault: purplePalette[500], + infoBackgroundWeak: purplePalette["alpha10"], + infoBackgroundDisabled: purplePalette["alpha40"], + infoBackgroundHover: purplePalette[600], + infoBackgroundActive: purplePalette[700], + infoTextDefault: purplePalette[100], + infoTextHover: purplePalette[200], + infoTextActive: purplePalette[300], + infoTextInDefault: purplePalette[50], + infoTextInDisabled: purplePalette["alpha10"], + infoBorderDefault: purplePalette[500], + infoBorderHover: purplePalette[300], + infoBorderActive: purplePalette[600], + infoBorderDisabled: purplePalette["alpha40"], + infoIconDefault: purplePalette[400], + infoIconHover: purplePalette[300], + infoIconActive: purplePalette[600], + infoIconDisabled: purplePalette["alpha40"], + infoIconInDefault: purplePalette[50], + infoIconInHover: purplePalette[100], + infoIconInActive: purplePalette[200], + infoIconInDisabled: purplePalette["alpha10"], + inactiveBackgroundDefault: greyPalette[50], + inactiveBackgroundWeak: greyPalette["alpha10"], + inactiveBackgroundDisabled: greyPalette["alpha40"], + inactiveBackgroundHover: greyPalette[100], + inactiveBackgroundActive: greyPalette[200], + inactiveTextDefault: greyPalette[800], + inactiveTextHover: greyPalette[900], + inactiveTextActive: greyPalette[800], + inactiveTextInDefault: greyPalette[50], + inactiveTextInDisabled: greyPalette["alpha40"], + inactiveBorderDefault: greyPalette[400], + inactiveBorderHover: greyPalette[500], + inactiveBorderActive: greyPalette[800], + inactiveBorderDisabled: greyPalette["alpha40"], + inactiveIconDefault: greyPalette[400], + inactiveIconHover: greyPalette[500], + inactiveIconActive: greyPalette[800], + inactiveIconDisabled: greyPalette["alpha40"], + inactiveIconInDefault: greyPalette[0], + inactiveIconInHover: greyPalette[50], + inactiveIconInActive: greyPalette[100], + inactiveIconInDisabled: greyPalette["alpha10"], + warningBackgroundDefault: lightOrangePalette[500], + warningBackgroundWeak: lightOrangePalette["alpha10"], + warningBackgroundHover: lightOrangePalette[300], + warningBackgroundActive: lightOrangePalette[600], + warningBackgroundDisabled: lightOrangePalette["alpha40"], + warningTextDefault: lightOrangePalette[100], + warningTextHover: lightOrangePalette[200], + warningTextActive: lightOrangePalette[300], + warningTextInDefault: lightOrangePalette[50], + warningTextInDisabled: lightOrangePalette["alpha10"], + warningBorderDefault: lightOrangePalette[500], + warningBorderHover: lightOrangePalette[300], + warningBorderActive: lightOrangePalette[600], + warningBorderDisabled: lightOrangePalette["alpha40"], + warningIconDefault: lightOrangePalette[400], + warningIconHover: lightOrangePalette[300], + warningIconActive: lightOrangePalette[600], + warningIconDisabled: lightOrangePalette["alpha40"], + warningIconInDefault: lightOrangePalette[50], + warningIconInHover: lightOrangePalette[100], + warningIconInActive: lightOrangePalette[200], + warningIconInDisabled: lightOrangePalette["alpha10"], + severeWarningBackgroundDefault: orangePalette[500], + severeWarningBackgroundWeak: orangePalette["alpha10"], + severeWarningBackgroundHover: orangePalette[300], + severeWarningBackgroundActive: orangePalette[600], + severeWarningBackgroundDisabled: orangePalette["alpha40"], + severeWarningTextDefault: orangePalette[100], + severeWarningTextHover: orangePalette[200], + severeWarningTextActive: orangePalette[300], + severeWarningTextInDefault: orangePalette[50], + severeWarningTextInDisabled: orangePalette["alpha10"], + severeWarningBorderDefault: orangePalette[500], + severeWarningBorderHover: orangePalette[300], + severeWarningBorderActive: orangePalette[600], + severeWarningBorderDisabled: orangePalette["alpha40"], + severeWarningIconDefault: orangePalette[400], + severeWarningIconHover: orangePalette[300], + severeWarningIconActive: orangePalette[600], + severeWarningIconDisabled: orangePalette["alpha40"], + severeWarningIconInDefault: orangePalette[50], + severeWarningIconInHover: orangePalette[100], + severeWarningIconInActive: orangePalette[200], + severeWarningIconInDisabled: orangePalette["alpha10"], + moderateBackgroundDefault: yellowPalette[500], + moderateBackgroundWeak: yellowPalette["alpha10"], + moderateBackgroundHover: yellowPalette[300], + moderateBackgroundActive: yellowPalette[600], + moderateBackgroundDisabled: yellowPalette["alpha40"], + moderateTextDefault: yellowPalette[50], + moderateTextHover: yellowPalette[100], + moderateTextActive: yellowPalette[200], + moderateTextInDefault: yellowPalette[50], + moderateTextInDisabled: yellowPalette["alpha10"], + moderateBorderDefault: yellowPalette[500], + moderateBorderHover: yellowPalette[300], + moderateBorderActive: yellowPalette[600], + moderateBorderDisabled: yellowPalette["alpha40"], + moderateIconDefault: yellowPalette[50], + moderateIconHover: yellowPalette[100], + moderateIconActive: yellowPalette[200], + moderateIconDisabled: yellowPalette["alpha40"], + moderateIconInDefault: yellowPalette[50], + moderateIconInHover: yellowPalette[100], + moderateIconInActive: yellowPalette[200], + moderateIconInDisabled: yellowPalette["alpha10"], + accentADefault: lavenderPalette[200], + accentAWeak: lavenderPalette[700], + accentBDefault: sunsetPalette[200], + accentBWeak: sunsetPalette[600], + accentCDefault: sunsetPalette[50], + accentCWeak: sunsetPalette[500], + accentDDefault: purplePalette[200], + accentDWeak: sunsetPalette[700], + accentEDefault: limePalette[200], + accentEWeak: limePalette[700], + accentFDefault: orangePalette[200], + accentFWeak: orangePalette[900], + accentGDefault: nightPalette[100], + accentGWeak: nightPalette[400], + accentHDefault: bluePalette[200], + accentHWeak: nightPalette[800], + accentIDefault: pinkPalette[200], + accentIWeak: pinkPalette[600], + accentJDefault: tealPalette[200], + accentJWeak: tealPalette[600], +}; diff --git a/packages/open-ui-kit/src/theme/light/light-theme.tsx b/packages/open-ui-kit/src/theme/light/light-theme.tsx index 4f62e5f..1d9442a 100644 --- a/packages/open-ui-kit/src/theme/light/light-theme.tsx +++ b/packages/open-ui-kit/src/theme/light/light-theme.tsx @@ -29,7 +29,7 @@ import { lightModeCardRaised, lightModeCardFloating, lightModeSideDrawer, -} from "./light-color-palette"; +} from "../color-palette"; import { createTheme, PaletteOptions, @@ -61,7 +61,7 @@ import { tabComponent, tabsComponent, tooltipComponent, -} from "./mui"; +} from "../mui"; export const shadows: Shadows = [ `none`, diff --git a/packages/open-ui-kit/src/theme/light/light-vars.ts b/packages/open-ui-kit/src/theme/light/light-vars.ts index c78ab84..5ba97b3 100644 --- a/packages/open-ui-kit/src/theme/light/light-vars.ts +++ b/packages/open-ui-kit/src/theme/light/light-vars.ts @@ -33,7 +33,7 @@ import { limePalette, pinkPalette, tealPalette, -} from "./light-color-palette"; +} from "../color-palette"; export const lightVars: VarsType = { brandOrange: lightOrangePalette[500], @@ -56,7 +56,7 @@ export const lightVars: VarsType = { baseBorderDefault: surfaceLightPalette[700], baseBorderStrong: surfaceLightPalette[900], baseBorderMedium: surfaceLightPalette[600], - baseBorderWeak: surfaceLightPalette[300], + baseBorderWeak: surfaceLightPalette[50], brandIconPrimaryDefault: bluePalette[300], brandIconPrimaryWeak: bluePalette[100], brandIconPrimaryMedium: bluePalette[200], @@ -104,23 +104,23 @@ export const lightVars: VarsType = { interactiveSecondaryDefaultDefault: surfaceDarkPalette[600], interactiveSecondaryDefaultHover: surfaceDarkPalette[300], interactiveSecondaryDefaultActive: surfaceDarkPalette[900], - interactiveSecondaryDefaultDisabled: "#00142B66", - interactiveSecondaryWeakDefault: surfaceLightPalette[800], - interactiveSecondaryWeakHover: surfaceDarkPalette[50], + interactiveSecondaryDefaultDisabled: "#00142b66", + interactiveSecondaryWeakDefault: surfaceLightPalette[600], + interactiveSecondaryWeakHover: surfaceLightPalette[300], interactiveSecondaryWeakActive: surfaceLightPalette[900], - interactiveSecondaryWeakDisabled: "#D1DBF666", + interactiveSecondaryWeakDisabled: "#d1dbf666", interactiveInverseBackgroundDefault: surfaceDarkPalette[900], interactiveInverseBackgroundHover: surfaceDarkPalette[500], interactiveInverseBackgroundActive: surfaceDarkPalette[800], - interactiveInverseBackgroundDisabled: "#00142B66", + interactiveInverseBackgroundDisabled: "#00142b66", interactiveInverseTextDefault: surfaceLightPalette[50], interactiveInverseTextHover: surfaceLightPalette[200], interactiveInverseTextActive: surfaceLightPalette[100], - interactiveInverseTextDisabled: "#C8D5F51A", + interactiveInverseTextDisabled: "#c8d5f519", interactiveTextInDefault: surfaceDarkPalette[900], interactiveTextInHover: surfaceDarkPalette[500], interactiveTextInActive: surfaceDarkPalette[800], - interactiveTextInDisabled: "#00142B66", + interactiveTextInDisabled: "#00142b66", interactiveTertiaryDefault: lightOrangePalette[600], interactiveTertiaryHover: lightOrangePalette[200], interactiveTertiaryActive: lightOrangePalette[800], @@ -238,7 +238,7 @@ export const lightVars: VarsType = { inactiveBackgroundDefault: greyPalette[400], inactiveBackgroundWeak: greyPalette[50], inactiveBackgroundDisabled: greyPalette["alpha40"], - inactiveBackgroundHover: greyPalette[700], + inactiveBackgroundHover: greyPalette[600], inactiveBackgroundActive: greyPalette[800], inactiveTextDefault: greyPalette[400], inactiveTextHover: greyPalette[500], diff --git a/packages/open-ui-kit/src/theme/light/mui/accordion.tsx b/packages/open-ui-kit/src/theme/mui/accordion.tsx similarity index 97% rename from packages/open-ui-kit/src/theme/light/mui/accordion.tsx rename to packages/open-ui-kit/src/theme/mui/accordion.tsx index 8e22d25..e16666b 100644 --- a/packages/open-ui-kit/src/theme/light/mui/accordion.tsx +++ b/packages/open-ui-kit/src/theme/mui/accordion.tsx @@ -15,7 +15,7 @@ */ import { accordionSummaryClasses, Components, Theme } from "@mui/material"; -import { lightBluePalette } from "../light-color-palette"; +import { lightBluePalette } from "../color-palette"; export const accordionComponent = (theme: Theme): Components => { return { diff --git a/packages/open-ui-kit/src/theme/light/mui/app-bar.tsx b/packages/open-ui-kit/src/theme/mui/app-bar.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/app-bar.tsx rename to packages/open-ui-kit/src/theme/mui/app-bar.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/avatar-group.tsx b/packages/open-ui-kit/src/theme/mui/avatar-group.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/avatar-group.tsx rename to packages/open-ui-kit/src/theme/mui/avatar-group.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/avatar.tsx b/packages/open-ui-kit/src/theme/mui/avatar.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/avatar.tsx rename to packages/open-ui-kit/src/theme/mui/avatar.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/button.tsx b/packages/open-ui-kit/src/theme/mui/button.tsx similarity index 99% rename from packages/open-ui-kit/src/theme/light/mui/button.tsx rename to packages/open-ui-kit/src/theme/mui/button.tsx index 75b5c47..ce53c8f 100644 --- a/packages/open-ui-kit/src/theme/light/mui/button.tsx +++ b/packages/open-ui-kit/src/theme/mui/button.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { lightBluePalette } from "../light-color-palette"; +import { lightBluePalette } from "../color-palette"; import { Components, Theme } from "@mui/material"; export const buttonComponent = (theme: Theme): Components => { diff --git a/packages/open-ui-kit/src/theme/light/mui/card.tsx b/packages/open-ui-kit/src/theme/mui/card.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/card.tsx rename to packages/open-ui-kit/src/theme/mui/card.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/checkbox.tsx b/packages/open-ui-kit/src/theme/mui/checkbox.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/checkbox.tsx rename to packages/open-ui-kit/src/theme/mui/checkbox.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/circular-progress.tsx b/packages/open-ui-kit/src/theme/mui/circular-progress.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/circular-progress.tsx rename to packages/open-ui-kit/src/theme/mui/circular-progress.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/dialog.tsx b/packages/open-ui-kit/src/theme/mui/dialog.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/dialog.tsx rename to packages/open-ui-kit/src/theme/mui/dialog.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/divider.tsx b/packages/open-ui-kit/src/theme/mui/divider.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/divider.tsx rename to packages/open-ui-kit/src/theme/mui/divider.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/index.ts b/packages/open-ui-kit/src/theme/mui/index.ts similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/index.ts rename to packages/open-ui-kit/src/theme/mui/index.ts diff --git a/packages/open-ui-kit/src/theme/light/mui/input.tsx b/packages/open-ui-kit/src/theme/mui/input.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/input.tsx rename to packages/open-ui-kit/src/theme/mui/input.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/list.tsx b/packages/open-ui-kit/src/theme/mui/list.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/list.tsx rename to packages/open-ui-kit/src/theme/mui/list.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/menu.tsx b/packages/open-ui-kit/src/theme/mui/menu.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/menu.tsx rename to packages/open-ui-kit/src/theme/mui/menu.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/popover.tsx b/packages/open-ui-kit/src/theme/mui/popover.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/popover.tsx rename to packages/open-ui-kit/src/theme/mui/popover.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/radio.tsx b/packages/open-ui-kit/src/theme/mui/radio.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/radio.tsx rename to packages/open-ui-kit/src/theme/mui/radio.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/skeleton.tsx b/packages/open-ui-kit/src/theme/mui/skeleton.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/skeleton.tsx rename to packages/open-ui-kit/src/theme/mui/skeleton.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/snack-bar.tsx b/packages/open-ui-kit/src/theme/mui/snack-bar.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/snack-bar.tsx rename to packages/open-ui-kit/src/theme/mui/snack-bar.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/switch.tsx b/packages/open-ui-kit/src/theme/mui/switch.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/switch.tsx rename to packages/open-ui-kit/src/theme/mui/switch.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/tab.tsx b/packages/open-ui-kit/src/theme/mui/tab.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/tab.tsx rename to packages/open-ui-kit/src/theme/mui/tab.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/tabs.tsx b/packages/open-ui-kit/src/theme/mui/tabs.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/tabs.tsx rename to packages/open-ui-kit/src/theme/mui/tabs.tsx diff --git a/packages/open-ui-kit/src/theme/light/mui/tooltip.tsx b/packages/open-ui-kit/src/theme/mui/tooltip.tsx similarity index 100% rename from packages/open-ui-kit/src/theme/light/mui/tooltip.tsx rename to packages/open-ui-kit/src/theme/mui/tooltip.tsx diff --git a/packages/open-ui-kit/src/theme/tokens.json b/packages/open-ui-kit/src/theme/tokens.json new file mode 100644 index 0000000..576cc5c --- /dev/null +++ b/packages/open-ui-kit/src/theme/tokens.json @@ -0,0 +1,847 @@ +{ + "outshiftColors": { + "color": { + "surfaceLight50": "#fbfcfe", + "surfaceLight100": "#f5f8fd", + "surfaceLight200": "#eff3fc", + "surfaceLight300": "#e8eefb", + "surfaceLight400": "#e3eafa", + "surfaceLight500": "#dee6f9", + "surfaceLight600": "#dae3f8", + "surfaceLight700": "#d5dff7", + "surfaceLight800": "#d1dbf6", + "surfaceLight900": "#c8d5f5", + "surfaceDark50": "#4f628d", + "surfaceDark100": "#3a4e77", + "surfaceDark200": "#31466e", + "surfaceDark300": "#263b62", + "surfaceDark400": "#183056", + "surfaceDark500": "#0d274d", + "surfaceDark600": "#062242", + "surfaceDark700": "#001c3b", + "surfaceDark800": "#041930", + "surfaceDark900": "#00142b", + "blue50": "#e8f1ff", + "blue100": "#9bcaff", + "blue200": "#79b9ff", + "blue300": "#187adc", + "blue400": "#0063c2", + "blue500": "#0051af", + "blue600": "#004ba8", + "blue700": "#00409f", + "blue800": "#003796", + "blue900": "#002786", + "blue40": "#0051af66", + "blue10": "#0051af19", + "lightBlue50": "#edfbff", + "lightBlue100": "#bcf2ff", + "lightBlue200": "#8fe9ff", + "lightBlue300": "#62e0ff", + "lightBlue400": "#41d9ff", + "lightBlue500": "#1fd2ff", + "lightBlue600": "#1bcdff", + "lightBlue700": "#17c7ff", + "lightBlue800": "#12c1ff", + "lightBlue900": "#0ab6ff", + "lightBlue40": "#1fd2ff66", + "lightBlue10": "#1fd2ff19", + "grey0": "#ffffff", + "grey50": "#e8e9ea", + "grey100": "#c5c7cb", + "grey200": "#9ea2a8", + "grey300": "#777d85", + "grey400": "#59616b", + "grey500": "#3c4551", + "grey600": "#363e4a", + "grey700": "#2e3640", + "grey800": "#272e37", + "grey900": "#1a1f27", + "grey40": "#3c455166", + "grey10": "#3c455119", + "purple50": "#faecff", + "purple100": "#f1dbff", + "purple200": "#deb8ff", + "purple300": "#ca93ff", + "purple400": "#c080ff", + "purple500": "#b76dff", + "purple600": "#9c4eea", + "purple700": "#6a21ba", + "purple800": "#5300a4", + "purple900": "#1b0077", + "purple40": "#b76dff66", + "purple10": "#b76dff19", + "red50": "#f8e5ea", + "red100": "#eebfcb", + "red200": "#e394a9", + "red300": "#d76987", + "red400": "#cf496d", + "red500": "#c62953", + "red600": "#c0244c", + "red700": "#b91f42", + "red800": "#b11939", + "red900": "#a40f29", + "red40": "#c6295366", + "red10": "#c6295319", + "orange50": "#fdece8", + "orange100": "#fbd1c5", + "orange200": "#f9b29e", + "orange300": "#f69377", + "orange400": "#f47b5a", + "orange500": "#f2643d", + "orange600": "#f05c37", + "orange700": "#ee522f", + "orange800": "#ec4827", + "orange900": "#e8361a", + "orange40": "#f2643d66", + "orange10": "#f2643d19", + "lightOrange50": "#fff5e9", + "lightOrange100": "#ffe7c7", + "lightOrange200": "#ffd7a2", + "lightOrange300": "#ffc77d", + "lightOrange400": "#ffbb61", + "lightOrange500": "#fbaf45", + "lightOrange600": "#fbab2c", + "lightOrange700": "#fb9f36", + "lightOrange800": "#fb962e", + "lightOrange900": "#fb861f", + "lightOrange40": "#fbaf4566", + "lightOrange10": "#fbaf4519", + "yellow50": "#fffceb", + "yellow100": "#fff8cd", + "yellow200": "#fff3ac", + "yellow300": "#ffee8b", + "yellow400": "#ffea72", + "yellow500": "#ffe659", + "yellow600": "#ffe351", + "yellow700": "#ffdf48", + "yellow800": "#ffdb3e", + "yellow900": "#ffd52e", + "yellow40": "#ffe65966", + "yellow10": "#ffe65919", + "green50": "#eafbf6", + "green100": "#b3eadd", + "green200": "#80dcc6", + "green300": "#4dceaf", + "green400": "#26c49e", + "green500": "#00b98d", + "green600": "#00b285", + "green700": "#00aa7a", + "green800": "#00a270", + "green900": "#00935d", + "green40": "#00b98d66", + "green10": "#00b98d19", + "night10": "#dff1f5", + "night50": "#96d0dd", + "night100": "#62bed2", + "night200": "#46aace", + "night300": "#3d91be", + "night400": "#3577ae", + "night500": "#2d5e9e", + "night600": "#24448e", + "night700": "#1c2b7f", + "night800": "#162065", + "night900": "#11174b", + "sunset10": "#fff6d4", + "sunset50": "#f9cdac", + "sunset100": "#f3aca2", + "sunset200": "#ee8b97", + "sunset300": "#e96a8d", + "sunset400": "#db5087", + "sunset500": "#b8428c", + "sunset600": "#973490", + "sunset700": "#742796", + "sunset800": "#5e1f88", + "sunset900": "#4d1a70", + "lavender10": "#f1f5ff", + "lavender50": "#e0e5ff", + "lavender100": "#c8cdfb", + "lavender200": "#bac1ff", + "lavender300": "#a8afff", + "lavender400": "#9ca6ff", + "lavender500": "#8a95ff", + "lavender600": "#5c6ddd", + "lavender700": "#2847a5", + "lavender800": "#00358f", + "lavender900": "#002378", + "lime10": "#fcfee8", + "lime50": "#fcffd0", + "lime100": "#eaff80", + "lime200": "#d3f474", + "lime300": "#bbdc5e", + "lime400": "#a4c547", + "lime500": "#89ab2c", + "lime600": "#7da11b", + "lime700": "#5f8200", + "lime800": "#345900", + "lime900": "#193100", + "pink10": "#fff9ff", + "pink50": "#ffdeea", + "pink100": "#ffc4d5", + "pink200": "#ffa6ca", + "pink300": "#ff87a9", + "pink400": "#f2638c", + "pink500": "#e3447c", + "pink600": "#c2306f", + "pink700": "#97174a", + "pink800": "#7f0037", + "pink900": "#500014", + "teal10": "#efffff", + "teal50": "#c7ffff", + "teal100": "#92ffff", + "teal200": "#78fbff", + "teal300": "#5de2e8", + "teal400": "#3ecbd1", + "teal500": "#0bb2b8", + "teal600": "#028e99", + "teal700": "#007178", + "teal800": "#00484f", + "teal900": "#00353c" + } + }, + "brand": { + "value": { + "outshiftLogoLightOrange": "#fbaf45", + "outshiftBlue": "#0051af", + "outshiftMidnightBlue": "#0d274d", + "agentcyYellow": "#fbaf45", + "outshiftOrange": "#fb861f", + "agentcyBlue": "#187adc", + "agentcyDarkBlue": "#00142b", + "outshiftLogoLightBlue": "#17c7ff", + "outshiftLogoGreen": "#74bf4b", + "outshiftLogoWhite": "#ffffff", + "outshiftLogoOrange": "#f2643d", + "outshiftLogoDark": "#00142b" + } + }, + "tokens": { + "lightTheme": { + "baseTextStrong": "#00142b", + "baseTextDefault": "#3c4551", + "baseTextMedium": "#59616b", + "baseTextWeak": "#777d85", + "baseTextInverse": "#e8e9ea", + "brandIconPrimaryDefault": "#187adc", + "brandIconSecondaryDefault": "#00142b", + "brandIconTertiaryDefault": "#fbab2c", + "baseBackgroundStrong": "#eff3fc", + "controlBackgroundDefault": "#fbfcfe", + "controlBorderDefault": "#d5dff7", + "controlBorderStrong": "#c8d5f5", + "controlBorderMedium": "#dae3f8", + "controlBorderWeak": "#e8eefb", + "brandBackgroundPrimaryDefault": "#187adc", + "brandBackgroundSecondaryDefault": "#00142b", + "controlIconDefault": "#3c4551", + "controlIconStrong": "#1a1f27", + "controlIconMedium": "#777d85", + "controlIconWeak": "#9ea2a8", + "controlBorderHover": "#0051af", + "controlBorderActive": "#0051af", + "controlBorderDisabled": "#e8eefb", + "controlBorderNegative": "#c0244c", + "controlBackgroundDisabled": "#f5f8fd", + "baseTextDisabled": "#c5c7cb", + "controlIconHover": "#0051af", + "controlIconActive": "#0051af", + "controlBackgroundWeak": "#f5f8fd", + "controlIconDisabled": "#c5c7cb", + "interactivePrimaryDefaultDefault": "#187adc", + "interactivePrimaryDefaultHover": "#79b9ff", + "interactivePrimaryDefaultActive": "#0051af", + "interactivePrimaryDefaultDisabled": "#0051af66", + "interactiveSecondaryDefaultDefault": "#062242", + "interactiveSecondaryDefaultHover": "#263b62", + "interactiveSecondaryDefaultActive": "#00142b", + "interactiveSecondaryDefaultDisabled": "#00142b66", + "interactiveTextInDefault": "#00142b", + "interactiveTextInHover": "#0d274d", + "interactiveTextInActive": "#041930", + "interactiveTextInDisabled": "#00142b66", + "interactiveTertiaryDefault": "#fbab2c", + "interactiveTertiaryHover": "#ffd7a2", + "interactiveTertiaryActive": "#fb962e", + "interactiveTertiaryDisabled": "#fbaf4566", + "successBackgroundDefault": "#00b285", + "negativeBackgroundHover": "#cf496d", + "negativeBackgroundActive": "#b91f42", + "negativeBackgroundDisabled": "#c6295366", + "negativeTextDefault": "#c0244c", + "negativeTextHover": "#cf496d", + "negativeTextActive": "#b91f42", + "successBackgroundDisabled": "#00b98d66", + "negativeBorderActive": "#b91f42", + "negativeBorderHover": "#cf496d", + "negativeBorderDisabled": "#c6295366", + "negativeBorderDefault": "#c0244c", + "negativeIconDisabled": "#c6295366", + "negativeIconActive": "#b91f42", + "negativeIconHover": "#cf496d", + "negativeIconDefault": "#c0244c", + "negativeTextInDefault": "#f8e5ea", + "successBackgroundHover": "#b3eadd", + "successBackgroundActive": "#00aa7a", + "negativeTextInDisabled": "#c6295319", + "negativeIconInDefault": "#f8e5ea", + "negativeIconInHover": "#eebfcb", + "negativeIconInActive": "#e394a9", + "negativeIconInDisabled": "#c6295319", + "baseBackgroundMedium": "#f5f8fd", + "baseBackgroundWeak": "#fbfcfe", + "baseBorderDefault": "#d5dff7", + "baseBorderStrong": "#c8d5f5", + "baseBorderMedium": "#dae3f8", + "baseBorderWeak": "#fbfcfe", + "brandLogoPrimary": "#187adc", + "brandIconPrimaryWeak": "#9bcaff", + "brandIconPrimaryMedium": "#79b9ff", + "brandIconPrimaryStrong": "#0051af", + "brandIconSecondaryWeak": "#4f628d", + "brandIconSecondaryMedium": "#0d274d", + "brandIconTertiaryWeak": "#ffe7c7", + "brandIconTertiaryMedium": "#ffc77d", + "brandTextPrimary": "#0051af", + "brandTextSecondary": "#00142b", + "brandBackgroundPrimaryWeak": "#e8f1ff", + "brandBackgroundPrimaryMedium": "#9bcaff", + "controlBackgroundMedium": "#e3eafa", + "successBackgroundWeak": "#eafbf6", + "successIconActive": "#00aa7a", + "successIconDisabled": "#00b98d66", + "successIconHover": "#26c49e", + "successIconDefault": "#00b285", + "successTextActive": "#00aa7a", + "successTextHover": "#26c49e", + "successTextDefault": "#00b285", + "successTextInDisabled": "#00b98d19", + "successTextInDefault": "#eafbf6", + "successBorderDisabled": "#00b98d66", + "successBorderActive": "#00aa7a", + "successBorderHover": "#26c49e", + "successBorderDefault": "#00b285", + "successIconInDisabled": "#00b98d19", + "successIconInActive": "#80dcc6", + "successIconInHover": "#b3eadd", + "successIconInDefault": "#eafbf6", + "excellentBackgroundDefault": "#17c7ff", + "excellentBackgroundWeak": "#edfbff", + "excellentBackgroundDisabled": "#1fd2ff66", + "excellentBackgroundHover": "#1fd2ff", + "excellentBackgroundActive": "#0ab6ff", + "excellentTextDefault": "#17c7ff", + "excellentTextHover": "#1fd2ff", + "excellentTextActive": "#0ab6ff", + "excellentTextInDefault": "#edfbff", + "excellentTextInDisabled": "#1fd2ff19", + "excellentBorderDefault": "#17c7ff", + "excellentBorderHover": "#41d9ff", + "excellentBorderActive": "#0ab6ff", + "excellentBorderDisabled": "#1fd2ff66", + "excellentIconDefault": "#17c7ff", + "excellentIconHover": "#41d9ff", + "excellentIconActive": "#0ab6ff", + "excellentIconDisabled": "#1fd2ff66", + "excellentIconInDefault": "#edfbff", + "excellentIconInHover": "#bcf2ff", + "excellentIconInActive": "#8fe9ff", + "excellentIconInDisabled": "#1fd2ff19", + "neutralBackgroundDefault": "#004ba8", + "neutralBackgroundWeak": "#e8f1ff", + "neutralBackgroundDisabled": "#0051af66", + "neutralBackgroundHover": "#00409f", + "neutralBackgroundActive": "#003796", + "neutralTextDefault": "#004ba8", + "neutralTextHover": "#0051af", + "neutralTextActive": "#003796", + "neutralTextInDefault": "#e8f1ff", + "neutralTextInDisabled": "#0051af19", + "neutralBorderDefault": "#004ba8", + "neutralBorderHover": "#0051af", + "neutralBorderActive": "#003796", + "neutralBorderDisabled": "#0051af66", + "neutralIconDefault": "#004ba8", + "neutralIconHover": "#0051af", + "neutralIconActive": "#003796", + "neutralIconDisabled": "#0051af66", + "neutralIconInDefault": "#e8f1ff", + "neutralIconInHover": "#9bcaff", + "neutralIconInActive": "#79b9ff", + "neutralIconInDisabled": "#0051af19", + "negativeBackgroundDefault": "#c0244c", + "negativeBackgroundWeak": "#f8e5ea", + "infoBackgroundDefault": "#9c4eea", + "infoBackgroundWeak": "#faecff", + "infoBackgroundDisabled": "#b76dff66", + "infoBackgroundHover": "#6a21ba", + "infoBackgroundActive": "#5300a4", + "infoTextDefault": "#9c4eea", + "infoTextHover": "#b76dff", + "infoTextActive": "#5300a4", + "infoTextInDefault": "#faecff", + "infoTextInDisabled": "#b76dff19", + "infoBorderDefault": "#9c4eea", + "infoBorderHover": "#b76dff", + "infoBorderActive": "#5300a4", + "infoBorderDisabled": "#b76dff66", + "infoIconDefault": "#9c4eea", + "infoIconHover": "#b76dff", + "infoIconActive": "#5300a4", + "infoIconDisabled": "#b76dff66", + "infoIconInDefault": "#faecff", + "infoIconInHover": "#f1dbff", + "infoIconInActive": "#deb8ff", + "infoIconInDisabled": "#b76dff19", + "inactiveBackgroundDefault": "#59616b", + "inactiveBackgroundWeak": "#e8e9ea", + "inactiveBackgroundDisabled": "#3c455166", + "inactiveBackgroundHover": "#363e4a", + "inactiveBackgroundActive": "#272e37", + "inactiveTextDefault": "#59616b", + "inactiveTextHover": "#3c4551", + "inactiveTextActive": "#272e37", + "inactiveTextInDefault": "#e8e9ea", + "inactiveTextInDisabled": "#3c455119", + "inactiveBorderDefault": "#59616b", + "inactiveBorderHover": "#3c4551", + "inactiveBorderActive": "#272e37", + "inactiveBorderDisabled": "#3c455166", + "inactiveIconDefault": "#59616b", + "inactiveIconHover": "#3c4551", + "inactiveIconActive": "#272e37", + "inactiveIconDisabled": "#3c455166", + "inactiveIconInDefault": "#e8e9ea", + "inactiveIconInHover": "#c5c7cb", + "inactiveIconInActive": "#9ea2a8", + "inactiveIconInDisabled": "#3c455119", + "warningBackgroundDefault": "#fbab2c", + "warningBackgroundWeak": "#fff5e9", + "warningBackgroundHover": "#ffbb61", + "warningBackgroundActive": "#fb9f36", + "warningBackgroundDisabled": "#fbaf4566", + "warningTextDefault": "#fbab2c", + "warningTextHover": "#ffbb61", + "warningTextActive": "#fb9f36", + "warningTextInDefault": "#fff5e9", + "warningTextInDisabled": "#fbaf4519", + "warningBorderDefault": "#fbab2c", + "warningBorderHover": "#ffbb61", + "warningBorderActive": "#fb9f36", + "warningBorderDisabled": "#fbaf4566", + "warningIconDefault": "#fbab2c", + "warningIconHover": "#ffbb61", + "warningIconActive": "#fb9f36", + "warningIconDisabled": "#fbaf4566", + "warningIconInDefault": "#fff5e9", + "warningIconInHover": "#ffe7c7", + "warningIconInActive": "#ffd7a2", + "warningIconInDisabled": "#fbaf4519", + "severeWarningBackgroundDefault": "#f05c37", + "severeWarningBackgroundWeak": "#fdece8", + "severeWarningBackgroundHover": "#f47b5a", + "severeWarningBackgroundActive": "#ee522f", + "severeWarningBackgroundDisabled": "#f2643d66", + "severeWarningTextDefault": "#f05c37", + "severeWarningTextHover": "#f47b5a", + "severeWarningTextActive": "#ee522f", + "severeWarningTextInDefault": "#fdece8", + "severeWarningTextInDisabled": "#f2643d19", + "severeWarningBorderDefault": "#f05c37", + "severeWarningBorderHover": "#f47b5a", + "severeWarningBorderActive": "#ee522f", + "severeWarningBorderDisabled": "#f2643d66", + "severeWarningIconDefault": "#f05c37", + "severeWarningIconHover": "#f47b5a", + "severeWarningIconActive": "#ee522f", + "severeWarningIconDisabled": "#f2643d66", + "severeWarningIconInDefault": "#fdece8", + "severeWarningIconInHover": "#fbd1c5", + "severeWarningIconInActive": "#f9b29e", + "severeWarningIconInDisabled": "#f2643d19", + "moderateBackgroundDefault": "#ffe351", + "moderateBackgroundWeak": "#fffceb", + "moderateBackgroundHover": "#ffea72", + "moderateBackgroundActive": "#ffdf48", + "moderateBackgroundDisabled": "#ffe65966", + "moderateTextDefault": "#ffe351", + "moderateTextHover": "#ffea72", + "moderateTextActive": "#ffdf48", + "moderateTextInDefault": "#fffceb", + "moderateTextInDisabled": "#ffe65919", + "moderateBorderDefault": "#ffe351", + "moderateBorderHover": "#ffea72", + "moderateBorderActive": "#ffdf48", + "moderateBorderDisabled": "#ffe65966", + "moderateIconDefault": "#ffe351", + "moderateIconHover": "#ffea72", + "moderateIconActive": "#ffdf48", + "moderateIconDisabled": "#ffe65966", + "moderateIconInDefault": "#fffceb", + "moderateIconInHover": "#fff8cd", + "moderateIconInActive": "#fff3ac", + "moderateIconInDisabled": "#ffe65919", + "interactivePrimaryWeakDefault": "#e8f1ff", + "interactivePrimaryWeakHover": "#9bcaff", + "interactivePrimaryWeakActive": "#79b9ff", + "interactivePrimaryWeakDisabled": "#0051af19", + "accentADefault": "#5c6ddd", + "accentAWeak": "#f1f5ff", + "accentBDefault": "#b8428c", + "accentBWeak": "#f9cdac", + "accentCDefault": "#e96a8d", + "accentCWeak": "#fff6d4", + "accentDDefault": "#742796", + "accentDWeak": "#faecff", + "accentEDefault": "#7da11b", + "accentEWeak": "#fcfee8", + "accentFDefault": "#e8361a", + "accentFWeak": "#fdece8", + "accentGDefault": "#46aace", + "accentGWeak": "#dff1f5", + "accentHDefault": "#1c2b7f", + "accentHWeak": "#e8f1ff", + "accentIDefault": "#c2306f", + "accentIWeak": "#ffdeea", + "accentJDefault": "#028e99", + "accentJWeak": "#efffff", + "baseBackgroundHover": "#e8eefb", + "interactiveSecondaryWeakDefault": "#dae3f8", + "interactiveSecondaryWeakHover": "#e8eefb", + "interactiveSecondaryWeakActive": "#c8d5f5", + "interactiveSecondaryWeakDisabled": "#d1dbf666", + "interactiveInverseBackgroundDefault": "#00142b", + "interactiveInverseBackgroundHover": "#0d274d", + "interactiveInverseBackgroundActive": "#041930", + "interactiveInverseBackgroundDisabled": "#00142b66", + "interactiveInverseTextDefault": "#fbfcfe", + "interactiveInverseTextHover": "#eff3fc", + "interactiveInverseTextActive": "#f5f8fd", + "interactiveInverseTextDisabled": "#c8d5f519", + "baseTextDark": "#00142b", + "brandTextTertiary": "#fbab2c", + "brandLogoSecondary": "#0d274d", + "excellentBorderWeak": "#edfbff", + "infoBorderWeak": "#faecff", + "neutralBorderWeak": "#e8f1ff", + "inactiveBorderWeak": "#e8e9ea", + "successBorderWeak": "#eafbf6", + "moderateBorderWeak": "#fffceb", + "warningBorderWeak": "#fff5e9", + "severeWarningBorderWeak": "#fdece8", + "negativeBorderWeak": "#f8e5ea" + }, + "darkTheme": { + "baseTextStrong": "#ffffff", + "baseTextDefault": "#e8e9ea", + "baseTextMedium": "#c5c7cb", + "baseTextWeak": "#9ea2a8", + "baseTextInverse": "#00142b", + "brandIconPrimaryDefault": "#1bcdff", + "brandIconSecondaryDefault": "#4f628d", + "brandIconTertiaryDefault": "#fbab2c", + "baseBackgroundStrong": "#00142b", + "controlBackgroundDefault": "#183056", + "controlBorderDefault": "#4f628d", + "controlBorderStrong": "#3a4e77", + "controlBorderMedium": "#31466e", + "controlBorderWeak": "#263b62", + "brandBackgroundPrimaryDefault": "#187adc", + "brandBackgroundSecondaryDefault": "#0d274d", + "controlIconDefault": "#e8e9ea", + "controlIconStrong": "#ffffff", + "controlIconMedium": "#c5c7cb", + "controlIconWeak": "#9ea2a8", + "controlBorderHover": "#12c1ff", + "controlBorderActive": "#12c1ff", + "controlBorderDisabled": "#263b62", + "controlBorderNegative": "#c62953", + "controlBackgroundDisabled": "#0d274d", + "baseTextDisabled": "#777d85", + "controlIconHover": "#12c1ff", + "controlIconActive": "#12c1ff", + "controlBackgroundWeak": "#0d274d", + "controlIconDisabled": "#777d85", + "interactivePrimaryDefaultDefault": "#1bcdff", + "interactivePrimaryDefaultHover": "#62e0ff", + "interactivePrimaryDefaultActive": "#12c1ff", + "interactivePrimaryDefaultDisabled": "#1fd2ff66", + "interactiveSecondaryDefaultDefault": "#e8eefb", + "interactiveSecondaryDefaultHover": "#fbfcfe", + "interactiveSecondaryDefaultActive": "#dae3f8", + "interactiveSecondaryDefaultDisabled": "#fbfcfe66", + "interactiveTextInDefault": "#ffffff", + "interactiveTextInHover": "#c5c7cb", + "interactiveTextInActive": "#e8e9ea", + "interactiveTextInDisabled": "#777d85", + "interactiveTertiaryDefault": "#fbab2c", + "interactiveTertiaryHover": "#ffbb61", + "interactiveTertiaryActive": "#fb9f36", + "interactiveTertiaryDisabled": "#fbaf4566", + "successBackgroundDefault": "#00b98d", + "negativeBackgroundHover": "#d76987", + "negativeBackgroundActive": "#c0244c", + "negativeBackgroundDisabled": "#c6295366", + "negativeTextDefault": "#eebfcb", + "negativeTextHover": "#e394a9", + "negativeTextActive": "#d76987", + "successBackgroundDisabled": "#00b98d66", + "negativeBorderActive": "#c0244c", + "negativeBorderHover": "#d76987", + "negativeBorderDisabled": "#c6295366", + "negativeBorderDefault": "#c62953", + "negativeIconDisabled": "#c6295366", + "negativeIconActive": "#c0244c", + "negativeIconHover": "#d76987", + "negativeIconDefault": "#cf496d", + "negativeTextInDefault": "#f8e5ea", + "successBackgroundHover": "#b3eadd", + "successBackgroundActive": "#4dceaf", + "negativeTextInDisabled": "#c6295319", + "negativeIconInDefault": "#f8e5ea", + "negativeIconInHover": "#eebfcb", + "negativeIconInActive": "#e394a9", + "negativeIconInDisabled": "#c6295319", + "baseBackgroundMedium": "#062242", + "baseBackgroundWeak": "#183056", + "baseBorderDefault": "#31466e", + "baseBorderStrong": "#4f628d", + "baseBorderMedium": "#3a4e77", + "baseBorderWeak": "#183056", + "brandLogoPrimary": "#fbab2c", + "brandIconPrimaryWeak": "#bcf2ff", + "brandIconPrimaryMedium": "#62e0ff", + "brandIconPrimaryStrong": "#0ab6ff", + "brandIconSecondaryWeak": "#e3eafa", + "brandIconSecondaryMedium": "#c8d5f5", + "brandIconTertiaryWeak": "#ffe7c7", + "brandIconTertiaryMedium": "#ffc77d", + "brandTextPrimary": "#1bcdff", + "brandTextSecondary": "#f5f8fd", + "brandBackgroundPrimaryWeak": "#0d274d", + "brandBackgroundPrimaryMedium": "#263b62", + "controlBackgroundMedium": "#31466e", + "successBackgroundWeak": "#00b98d19", + "successIconActive": "#00b285", + "successIconDisabled": "#00b98d66", + "successIconHover": "#4dceaf", + "successIconDefault": "#26c49e", + "successTextActive": "#4dceaf", + "successTextHover": "#80dcc6", + "successTextDefault": "#b3eadd", + "successTextInDisabled": "#00b98d19", + "successTextInDefault": "#eafbf6", + "successBorderDisabled": "#00b98d66", + "successBorderActive": "#00b285", + "successBorderHover": "#4dceaf", + "successBorderDefault": "#00b98d", + "successIconInDisabled": "#00b98d19", + "successIconInActive": "#80dcc6", + "successIconInHover": "#b3eadd", + "successIconInDefault": "#eafbf6", + "excellentBackgroundDefault": "#0ab6ff", + "excellentBackgroundWeak": "#1fd2ff19", + "excellentBackgroundDisabled": "#1fd2ff66", + "excellentBackgroundHover": "#1bcdff", + "excellentBackgroundActive": "#12c1ff", + "excellentTextDefault": "#edfbff", + "excellentTextHover": "#bcf2ff", + "excellentTextActive": "#8fe9ff", + "excellentTextInDefault": "#edfbff", + "excellentTextInDisabled": "#1fd2ff19", + "excellentBorderDefault": "#17c7ff", + "excellentBorderHover": "#41d9ff", + "excellentBorderActive": "#0ab6ff", + "excellentBorderDisabled": "#1fd2ff66", + "excellentIconDefault": "#17c7ff", + "excellentIconHover": "#41d9ff", + "excellentIconActive": "#0ab6ff", + "excellentIconDisabled": "#1fd2ff66", + "excellentIconInDefault": "#edfbff", + "excellentIconInHover": "#bcf2ff", + "excellentIconInActive": "#8fe9ff", + "excellentIconInDisabled": "#1fd2ff19", + "neutralBackgroundDefault": "#187adc", + "neutralBackgroundWeak": "#0051af19", + "neutralBackgroundDisabled": "#0051af66", + "neutralBackgroundHover": "#0063c2", + "neutralBackgroundActive": "#0051af", + "neutralTextDefault": "#e8f1ff", + "neutralTextHover": "#9bcaff", + "neutralTextActive": "#79b9ff", + "neutralTextInDefault": "#e8f1ff", + "neutralTextInDisabled": "#0051af19", + "neutralBorderDefault": "#187adc", + "neutralBorderHover": "#79b9ff", + "neutralBorderActive": "#0051af", + "neutralBorderDisabled": "#0051af66", + "neutralIconDefault": "#187adc", + "neutralIconHover": "#79b9ff", + "neutralIconActive": "#0051af", + "neutralIconDisabled": "#0051af66", + "neutralIconInDefault": "#e8f1ff", + "neutralIconInHover": "#9bcaff", + "neutralIconInActive": "#79b9ff", + "neutralIconInDisabled": "#0051af19", + "negativeBackgroundDefault": "#c62953", + "negativeBackgroundWeak": "#c6295319", + "infoBackgroundDefault": "#b76dff", + "infoBackgroundWeak": "#b76dff19", + "infoBackgroundDisabled": "#b76dff66", + "infoBackgroundHover": "#9c4eea", + "infoBackgroundActive": "#6a21ba", + "infoTextDefault": "#f1dbff", + "infoTextHover": "#deb8ff", + "infoTextActive": "#ca93ff", + "infoTextInDefault": "#faecff", + "infoTextInDisabled": "#b76dff19", + "infoBorderDefault": "#b76dff", + "infoBorderHover": "#ca93ff", + "infoBorderActive": "#9c4eea", + "infoBorderDisabled": "#b76dff66", + "infoIconDefault": "#c080ff", + "infoIconHover": "#ca93ff", + "infoIconActive": "#9c4eea", + "infoIconDisabled": "#b76dff66", + "infoIconInDefault": "#faecff", + "infoIconInHover": "#f1dbff", + "infoIconInActive": "#deb8ff", + "infoIconInDisabled": "#b76dff19", + "inactiveBackgroundDefault": "#e8e9ea", + "inactiveBackgroundWeak": "#3c455119", + "inactiveBackgroundDisabled": "#3c455166", + "inactiveBackgroundHover": "#c5c7cb", + "inactiveBackgroundActive": "#9ea2a8", + "inactiveTextDefault": "#272e37", + "inactiveTextHover": "#1a1f27", + "inactiveTextActive": "#272e37", + "inactiveTextInDefault": "#e8e9ea", + "inactiveTextInDisabled": "#3c455166", + "inactiveBorderDefault": "#59616b", + "inactiveBorderHover": "#3c4551", + "inactiveBorderActive": "#272e37", + "inactiveBorderDisabled": "#3c455166", + "inactiveIconDefault": "#59616b", + "inactiveIconHover": "#3c4551", + "inactiveIconActive": "#272e37", + "inactiveIconDisabled": "#3c455166", + "inactiveIconInDefault": "#ffffff", + "inactiveIconInHover": "#e8e9ea", + "inactiveIconInActive": "#c5c7cb", + "inactiveIconInDisabled": "#3c455119", + "warningBackgroundDefault": "#fbaf45", + "warningBackgroundWeak": "#fbaf4519", + "warningBackgroundHover": "#ffc77d", + "warningBackgroundActive": "#fbab2c", + "warningBackgroundDisabled": "#fbaf4566", + "warningTextDefault": "#ffe7c7", + "warningTextHover": "#ffd7a2", + "warningTextActive": "#ffc77d", + "warningTextInDefault": "#fff5e9", + "warningTextInDisabled": "#fbaf4519", + "warningBorderDefault": "#fbaf45", + "warningBorderHover": "#ffc77d", + "warningBorderActive": "#fbab2c", + "warningBorderDisabled": "#fbaf4566", + "warningIconDefault": "#ffbb61", + "warningIconHover": "#ffc77d", + "warningIconActive": "#fbab2c", + "warningIconDisabled": "#fbaf4566", + "warningIconInDefault": "#fff5e9", + "warningIconInHover": "#ffe7c7", + "warningIconInActive": "#ffd7a2", + "warningIconInDisabled": "#fbaf4519", + "severeWarningBackgroundDefault": "#f2643d", + "severeWarningBackgroundWeak": "#f2643d19", + "severeWarningBackgroundHover": "#f69377", + "severeWarningBackgroundActive": "#f05c37", + "severeWarningBackgroundDisabled": "#f2643d66", + "severeWarningTextDefault": "#fbd1c5", + "severeWarningTextHover": "#f9b29e", + "severeWarningTextActive": "#f69377", + "severeWarningTextInDefault": "#fdece8", + "severeWarningTextInDisabled": "#f2643d19", + "severeWarningBorderDefault": "#f2643d", + "severeWarningBorderHover": "#f69377", + "severeWarningBorderActive": "#f05c37", + "severeWarningBorderDisabled": "#f2643d66", + "severeWarningIconDefault": "#f47b5a", + "severeWarningIconHover": "#f69377", + "severeWarningIconActive": "#f05c37", + "severeWarningIconDisabled": "#f2643d66", + "severeWarningIconInDefault": "#fdece8", + "severeWarningIconInHover": "#fbd1c5", + "severeWarningIconInActive": "#f9b29e", + "severeWarningIconInDisabled": "#f2643d19", + "moderateBackgroundDefault": "#ffe659", + "moderateBackgroundWeak": "#ffe65919", + "moderateBackgroundHover": "#ffee8b", + "moderateBackgroundActive": "#ffe351", + "moderateBackgroundDisabled": "#ffe65966", + "moderateTextDefault": "#fffceb", + "moderateTextHover": "#fff8cd", + "moderateTextActive": "#fff3ac", + "moderateTextInDefault": "#fffceb", + "moderateTextInDisabled": "#ffe65919", + "moderateBorderDefault": "#ffe659", + "moderateBorderHover": "#ffee8b", + "moderateBorderActive": "#ffe351", + "moderateBorderDisabled": "#ffe65966", + "moderateIconDefault": "#fffceb", + "moderateIconHover": "#fff8cd", + "moderateIconActive": "#fff3ac", + "moderateIconDisabled": "#ffe65966", + "moderateIconInDefault": "#fffceb", + "moderateIconInHover": "#fff8cd", + "moderateIconInActive": "#fff3ac", + "moderateIconInDisabled": "#ffe65919", + "interactivePrimaryWeakDefault": "#062242", + "interactivePrimaryWeakHover": "#263b62", + "interactivePrimaryWeakActive": "#183056", + "interactivePrimaryWeakDisabled": "#00142b19", + "accentADefault": "#bac1ff", + "accentAWeak": "#2847a5", + "accentBDefault": "#ee8b97", + "accentBWeak": "#973490", + "accentCDefault": "#f9cdac", + "accentCWeak": "#b8428c", + "accentDDefault": "#deb8ff", + "accentDWeak": "#742796", + "accentEDefault": "#d3f474", + "accentEWeak": "#5f8200", + "accentFDefault": "#f9b29e", + "accentFWeak": "#e8361a", + "accentGDefault": "#62bed2", + "accentGWeak": "#3577ae", + "accentHDefault": "#79b9ff", + "accentHWeak": "#162065", + "accentIDefault": "#ffa6ca", + "accentIWeak": "#c2306f", + "accentJDefault": "#78fbff", + "accentJWeak": "#028e99", + "baseBackgroundHover": "#001c3b", + "interactiveSecondaryWeakDefault": "#0d274d", + "interactiveSecondaryWeakHover": "#263b62", + "interactiveSecondaryWeakActive": "#001c3b", + "interactiveSecondaryWeakDisabled": "#04193066", + "interactiveInverseBackgroundDefault": "#c8d5f5", + "interactiveInverseBackgroundHover": "#dee6f9", + "interactiveInverseBackgroundActive": "#d1dbf6", + "interactiveInverseBackgroundDisabled": "#c8d5f566", + "interactiveInverseTextDefault": "#00142b", + "interactiveInverseTextHover": "#0d274d", + "interactiveInverseTextActive": "#041930", + "interactiveInverseTextDisabled": "#00142b19", + "baseTextDark": "#00142b", + "brandTextTertiary": "#fbab2c", + "brandLogoSecondary": "#ffffff", + "excellentBorderWeak": "#17c7ff", + "infoBorderWeak": "#b76dff", + "neutralBorderWeak": "#187adc", + "inactiveBorderWeak": "#59616b", + "successBorderWeak": "#00b98d", + "moderateBorderWeak": "#ffe659", + "warningBorderWeak": "#fbaf45", + "severeWarningBorderWeak": "#f2643d", + "negativeBorderWeak": "#c62953" + } + } +} \ No newline at end of file