0dcef48dc8
Feature implementations: - Schema in the Api Right Side Pane; - New Bindings UI, which is now a suggested widget; - Feature walkthrough for the aforementioned two units only if you are a new user. Only those users who have the flags `ab_ds_binding_enabled` and `ab_ds_schema_enabled` independently set to true can see the implementation described above. https://www.notion.so/appsmith/Activation-60c64894f42d4cdcb92220c1dbc73802
3029 lines
68 KiB
TypeScript
3029 lines
68 KiB
TypeScript
import { css } from "styled-components";
|
|
import type { Color } from "./Colors";
|
|
import { Colors } from "./Colors";
|
|
import * as FontFamilies from "./Fonts";
|
|
import tinycolor from "tinycolor2";
|
|
import { Alignment, Classes } from "@blueprintjs/core";
|
|
import type { Typography, TypographyKeys } from "./typography";
|
|
import { typography } from "./typography";
|
|
|
|
import type { LabelPosition } from "components/constants";
|
|
import {
|
|
TABLE_SCROLLBAR_HEIGHT,
|
|
TABLE_SCROLLBAR_WIDTH,
|
|
} from "widgets/TableWidgetV2/component/Constants";
|
|
import { Icon } from "design-system";
|
|
import React from "react";
|
|
export type FontFamily = (typeof FontFamilies)[keyof typeof FontFamilies];
|
|
|
|
export const IntentColors: Record<string, Color> = {
|
|
primary: "var(--ads-v2-color-fg-success)",
|
|
success: "var(--ads-v2-color-fg-success)",
|
|
secondary: "var(--ads-v2-color-fg-information)",
|
|
danger: "var(--ads-v2-color-fg-error)",
|
|
none: "var(--ads-v2-color-fg-information)",
|
|
warning: "var(--ads-v2-color-fg-error)",
|
|
successLight: "var(--ads-v2-color-fg-success)",
|
|
};
|
|
|
|
export type Intent = (typeof IntentColors)[keyof typeof IntentColors];
|
|
|
|
export const IntentIcons: Record<Intent, React.ReactNode> = {
|
|
primary: <Icon color="var(--ads-v2-color-fg-success)" name="close-circle" />,
|
|
success: <Icon color="var(--ads-v2-color-fg-success)" name="close-circle" />,
|
|
secondary: (
|
|
<Icon color="var(--ads-v2-color-fg-information)" name="information-fill" />
|
|
),
|
|
danger: (
|
|
<Icon color="var(--ads-v2-color-fg-error)" name="close-circle-fill" />
|
|
),
|
|
none: (
|
|
<Icon color="var(--ads-v2-color-fg-information)" name="information-fill" />
|
|
),
|
|
warning: <Icon color="var(--ads-v2-color-fg-warning)" name="alert-fill" />,
|
|
};
|
|
|
|
export enum Skin {
|
|
LIGHT,
|
|
DARK,
|
|
}
|
|
|
|
export const truncateTextUsingEllipsis = css`
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: block;
|
|
`;
|
|
|
|
export const getTypographyByKey = (
|
|
props: Record<string, any>,
|
|
key: TypographyKeys,
|
|
) => `
|
|
font-weight: ${props.theme.typography[key].fontWeight};
|
|
font-size: ${props.theme.typography[key].fontSize}px;
|
|
line-height: ${props.theme.typography[key].lineHeight}px;
|
|
letter-spacing: ${props.theme.typography[key].letterSpacing}px;
|
|
`;
|
|
|
|
export const BlueprintControlTransform = css`
|
|
&& {
|
|
.${Classes.CONTROL}.${Classes.DISABLED} {
|
|
color: ${Colors.GREY_8};
|
|
}
|
|
.${Classes.CONTROL} {
|
|
& input:checked ~ .${Classes.CONTROL_INDICATOR} {
|
|
background: ${(props) => props.theme.colors.primaryOld};
|
|
box-shadow: none;
|
|
border: 1px solid ${(props) => props.theme.colors.primaryOld};
|
|
}
|
|
|
|
&
|
|
input:invalid:not(:disabled):not(:checked)
|
|
~ .${Classes.CONTROL_INDICATOR} {
|
|
border: 1px solid var(--wds-color-border-danger);
|
|
}
|
|
|
|
&:hover
|
|
input:invalid:not(:disabled):not(:checked)
|
|
~ .${Classes.CONTROL_INDICATOR} {
|
|
border: 1px solid var(--wds-color-border-danger-hover) !important;
|
|
}
|
|
|
|
& input:disabled:not(:checked) ~ .${Classes.CONTROL_INDICATOR} {
|
|
background-color: var(--wds-color-bg-disabled) !important;
|
|
border: 1px solid var(--wds-color-border-disabled) !important;
|
|
}
|
|
|
|
& input:disabled:checked ~ .${Classes.CONTROL_INDICATOR} {
|
|
background-color: var(--wds-color-bg-disabled) !important;
|
|
border: 1px solid var(--wds-color-border-disabled) !important;
|
|
}
|
|
|
|
&:hover input:not(:checked):not(:disabled) ~ .bp3-control-indicator,
|
|
& input:not(:checked):not(:disabled):focus ~ .bp3-control-indicator {
|
|
border: 1px solid var(--wds-color-bg-disabled-strong) !important;
|
|
}
|
|
}
|
|
|
|
.${Classes.SWITCH} {
|
|
& input ~ .${Classes.CONTROL_INDICATOR} {
|
|
transition: none;
|
|
|
|
&::before {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
input:checked ~ .${Classes.CONTROL_INDICATOR} {
|
|
&::before {
|
|
left: calc(105% - 1em);
|
|
}
|
|
}
|
|
input:not(:checked) ~ .${Classes.CONTROL_INDICATOR} {
|
|
background: var(--wds-color-bg-strong);
|
|
border: 1px solid var(--wds-color-border);
|
|
}
|
|
|
|
input:disabled ~ .${Classes.CONTROL_INDICATOR} {
|
|
background: var(--wds-color-bg-disabled) !important;
|
|
&::before {
|
|
background: var(--wds-color-bg-disabled-strong);
|
|
}
|
|
}
|
|
|
|
&:hover input:not(:checked):not(:disabled) ~ .bp3-control-indicator,
|
|
input:not(:checked):not(:disabled):focus ~ .bp3-control-indicator {
|
|
background: var(--wds-color-bg-strong-hover);
|
|
border: 1px solid var(--wds-color-border-hover) !important;
|
|
}
|
|
}
|
|
|
|
.${Classes.CONTROL_INDICATOR} {
|
|
&::before {
|
|
position: absolute;
|
|
left: -1px;
|
|
top: -1px;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const invisible = css`
|
|
&& > * {
|
|
opacity: 0.6;
|
|
}
|
|
`;
|
|
|
|
export const disable = css`
|
|
& {
|
|
cursor: not-allowed;
|
|
|
|
& > * {
|
|
opacity: 0.5;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const BlueprintCSSTransform = css`
|
|
&&&& {
|
|
.${Classes.BUTTON} {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
background: white;
|
|
}
|
|
.${Classes.INTENT_PRIMARY} {
|
|
background: ${IntentColors.primary};
|
|
}
|
|
.${Classes.INTENT_SUCCESS} {
|
|
background: ${IntentColors.success};
|
|
}
|
|
.${Classes.INTENT_DANGER} {
|
|
background: ${IntentColors.danger};
|
|
}
|
|
.${Classes.INTENT_WARNING} {
|
|
background: ${IntentColors.warning};
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const darken = (color: Color, intensity: number) => {
|
|
return new tinycolor(color).darken(intensity).toString();
|
|
};
|
|
|
|
export const darkenHover = (color: Color) => {
|
|
return darken(color, 8);
|
|
};
|
|
|
|
export const darkenActive = (color: Color) => {
|
|
return darken(color, 16);
|
|
};
|
|
|
|
const getButtonHoverAndActiveStyles = (color: Color, filled = true) => {
|
|
return css`
|
|
background: ${color};
|
|
border-color: ${filled ? color : "auto"};
|
|
color: ${filled ? Colors.WHITE : "auto"};
|
|
&:hover {
|
|
background: ${darkenHover(color)};
|
|
border-color: ${darkenHover(color)};
|
|
box-shadow: none;
|
|
}
|
|
&:active {
|
|
background: ${darkenActive(color)};
|
|
border-color: ${darkenActive(color)};
|
|
box-shadow: none;
|
|
}
|
|
`;
|
|
};
|
|
|
|
export const BlueprintButtonIntentsCSS = css`
|
|
&&.${Classes.BUTTON} {
|
|
box-shadow: none;
|
|
display: flex;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
outline: none;
|
|
min-width: 50px;
|
|
color: ${IntentColors.secondary};
|
|
border-color: ${IntentColors.none};
|
|
& span.bp3-icon {
|
|
color: ${IntentColors.none};
|
|
}
|
|
& span {
|
|
font-weight: ${(props) => props.theme.fontWeights[3]};
|
|
}
|
|
background: ${Colors.WHITE};
|
|
}
|
|
&&&.${Classes.BUTTON}.${Classes.INTENT_PRIMARY}:not(.${Classes.MINIMAL}) {
|
|
background: ${IntentColors.primary};
|
|
${getButtonHoverAndActiveStyles(IntentColors.primary)}
|
|
}
|
|
&&&.${Classes.BUTTON}.bp3-intent-secondary:not(.${Classes.MINIMAL}) {
|
|
background: ${IntentColors.secondary};
|
|
${getButtonHoverAndActiveStyles(IntentColors.secondary)}
|
|
}
|
|
&&&.${Classes.BUTTON}.${Classes.INTENT_DANGER}:not(.${Classes.MINIMAL}) {
|
|
background: ${IntentColors.danger};
|
|
${getButtonHoverAndActiveStyles(IntentColors.danger)}
|
|
}
|
|
&&&.${Classes.BUTTON}.${Classes.INTENT_SUCCESS}:not(.${Classes.MINIMAL}) {
|
|
background: ${IntentColors.success};
|
|
${getButtonHoverAndActiveStyles(IntentColors.success)}
|
|
}
|
|
&&&.${Classes.BUTTON}.${Classes.INTENT_WARNING}:not(.${Classes.MINIMAL}) {
|
|
background: ${IntentColors.warning};
|
|
${getButtonHoverAndActiveStyles(IntentColors.warning)}
|
|
}
|
|
|
|
&&.${Classes.MINIMAL}.${Classes.BUTTON} {
|
|
border: none;
|
|
border-color: ${IntentColors.none};
|
|
& span.bp3-icon {
|
|
color: ${IntentColors.none};
|
|
}
|
|
}
|
|
&&&.${Classes.MINIMAL}.${Classes.INTENT_PRIMARY} {
|
|
color: ${IntentColors.primary};
|
|
border-color: ${IntentColors.primary};
|
|
}
|
|
&&&.${Classes.MINIMAL}.bp3-intent-secondary {
|
|
color: ${IntentColors.secondary};
|
|
border-color: ${IntentColors.secondary};
|
|
}
|
|
&&&.${Classes.MINIMAL}.${Classes.INTENT_DANGER} {
|
|
color: ${IntentColors.danger};
|
|
border-color: ${IntentColors.danger};
|
|
}
|
|
&&&.${Classes.MINIMAL}.${Classes.INTENT_WARNING} {
|
|
color: ${IntentColors.warning};
|
|
border-color: ${IntentColors.warning};
|
|
}
|
|
&&&.${Classes.MINIMAL}.${Classes.INTENT_SUCCESS} {
|
|
color: ${IntentColors.success};
|
|
border-color: ${IntentColors.success};
|
|
}
|
|
|
|
&&&&&&.${Classes.DISABLED} {
|
|
color: ${Colors.SLATE_GRAY};
|
|
background: ${Colors.MERCURY};
|
|
border-color: ${Colors.MERCURY};
|
|
}
|
|
`;
|
|
|
|
export const BlueprintInputTransform = css`
|
|
&& {
|
|
.${Classes.INPUT} {
|
|
border-radius: ${(props) => props.theme.radii[1]}px;
|
|
box-shadow: none;
|
|
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
|
|
&:focus {
|
|
border: ${(props) => getBorderCSSShorthand(props.theme.borders[2])};
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const BlueprintRadioSwitchGroupTransform = css<{
|
|
alignment: Alignment;
|
|
height?: number;
|
|
inline: boolean;
|
|
labelPosition?: LabelPosition;
|
|
optionCount: number;
|
|
}>`
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
${({ inline, optionCount }) => `
|
|
display: ${inline ? "inline-flex" : "flex"};
|
|
flex-direction: ${inline ? "row" : "column"};
|
|
align-items: ${inline ? "center" : "flex-start"};
|
|
${inline && "flex-wrap: wrap"};
|
|
justify-content: ${
|
|
optionCount > 1 ? `space-between` : inline ? `flex-start` : `center`
|
|
};
|
|
gap: 10px;
|
|
flex-grow: 1;
|
|
`}
|
|
|
|
${BlueprintControlTransform};
|
|
.${Classes.CONTROL} {
|
|
display: ${({ alignment, inline }) => {
|
|
if (alignment === Alignment.RIGHT) {
|
|
return inline ? "inline-block" : "block";
|
|
}
|
|
return "flex";
|
|
}};
|
|
width: ${({ alignment, inline }) => {
|
|
if (alignment === Alignment.RIGHT) {
|
|
return inline ? "auto" : "100%";
|
|
}
|
|
return "auto";
|
|
}};
|
|
align-items: center;
|
|
border: 1px solid transparent;
|
|
color: ${Colors.GREY_10};
|
|
line-height: 16px;
|
|
|
|
.bp3-control-indicator {
|
|
margin-top: 0;
|
|
border: 1px solid ${Colors.GREY_5};
|
|
box-shadow: none;
|
|
background-image: none;
|
|
background-color: white;
|
|
}
|
|
}
|
|
`;
|
|
|
|
const iconSizes = {
|
|
XXS: 8,
|
|
XS: 10,
|
|
SMALL: 12,
|
|
MEDIUM: 14,
|
|
LARGE: 15,
|
|
XL: 16,
|
|
XXL: 18,
|
|
XXXL: 20,
|
|
XXXXL: 22,
|
|
};
|
|
|
|
type IconSizeType = typeof iconSizes;
|
|
|
|
export type ThemeBorder = {
|
|
thickness: number;
|
|
style: "dashed" | "solid";
|
|
color: Color;
|
|
};
|
|
|
|
type PropertyPaneTheme = {
|
|
width: number;
|
|
height: number;
|
|
dividerColor: Color;
|
|
titleHeight: number;
|
|
connectionsHeight: number;
|
|
};
|
|
|
|
export type NestedObjectOrArray<T> =
|
|
| Record<string, T | T[] | Record<string, T | T[]>>
|
|
| T
|
|
| T[];
|
|
export type Theme = {
|
|
radii: Array<number>;
|
|
fontSizes: Array<number>;
|
|
drawerWidth: string;
|
|
spaces: Array<number>;
|
|
fontWeights: Array<number>;
|
|
colors: any;
|
|
typography: Typography;
|
|
lineHeights: Array<number>;
|
|
fonts: {
|
|
code: FontFamily;
|
|
text: FontFamily;
|
|
};
|
|
borders: ThemeBorder[];
|
|
evaluatedValuePopup: {
|
|
width: number;
|
|
height: number;
|
|
};
|
|
propertyPane: PropertyPaneTheme;
|
|
headerHeight: string;
|
|
smallHeaderHeight: string;
|
|
bottomBarHeight: string;
|
|
pageTabsHeight: string;
|
|
integrationsPageUnusableHeight: string;
|
|
backBanner: string;
|
|
homePage: any;
|
|
sidebarWidth: string;
|
|
canvasBottomPadding: number;
|
|
navbarMenuHeight: string;
|
|
navbarMenuLineHeight: string;
|
|
sideNav: {
|
|
minWidth: number;
|
|
maxWidth: number;
|
|
bgColor: Color;
|
|
fontColor: Color;
|
|
activeItemBGColor: Color;
|
|
navItemHeight: number;
|
|
};
|
|
card: {
|
|
minWidth: number;
|
|
minHeight: number;
|
|
titleHeight: number;
|
|
divider: ThemeBorder;
|
|
};
|
|
dropdown: {
|
|
[Skin.LIGHT]: {
|
|
hoverBG: ShadeColor;
|
|
hoverText: ShadeColor;
|
|
inActiveBG: ShadeColor;
|
|
inActiveText: ShadeColor;
|
|
border: Color;
|
|
background: Color;
|
|
};
|
|
[Skin.DARK]: {
|
|
hoverBG: ShadeColor;
|
|
hoverText: ShadeColor;
|
|
inActiveBG: ShadeColor;
|
|
inActiveText: ShadeColor;
|
|
border: Color;
|
|
background: Color;
|
|
};
|
|
};
|
|
authCard: {
|
|
width: number;
|
|
dividerSpacing: number;
|
|
formMessageWidth: number;
|
|
};
|
|
shadows: string[];
|
|
widgets: {
|
|
tableWidget: {
|
|
selectHighlightColor: Color;
|
|
};
|
|
};
|
|
pageContentWidth: number;
|
|
tabPanelHeight: number;
|
|
alert: Record<string, { color: Color }>;
|
|
lightningMenu: {
|
|
[Skin.DARK]: {
|
|
default: {
|
|
color: Color;
|
|
background: Color;
|
|
};
|
|
active: {
|
|
color: Color;
|
|
background: Color;
|
|
};
|
|
hover: {
|
|
color: Color;
|
|
background: Color;
|
|
};
|
|
none: {
|
|
color: string;
|
|
background: string;
|
|
};
|
|
};
|
|
[Skin.LIGHT]: {
|
|
default: {
|
|
color: string;
|
|
background: string;
|
|
};
|
|
active: {
|
|
color: string;
|
|
background: string;
|
|
};
|
|
hover: {
|
|
color: string;
|
|
background: string;
|
|
};
|
|
none: {
|
|
color: string;
|
|
background: string;
|
|
};
|
|
};
|
|
};
|
|
iconSizes: IconSizeType;
|
|
actionSidePane: {
|
|
width: number;
|
|
};
|
|
onboarding: {
|
|
statusBarHeight: number;
|
|
};
|
|
settings: {
|
|
footerHeight: number;
|
|
footerShadow: string;
|
|
linkBg: string;
|
|
};
|
|
};
|
|
|
|
export const getColorWithOpacity = (color: Color, opacity: number) => {
|
|
color = color.slice(1);
|
|
const val = parseInt(color, 16);
|
|
const r = (val >> 16) & 255;
|
|
const g = (val >> 8) & 255;
|
|
const b = val & 255;
|
|
return `rgba(${r},${g},${b},${opacity})`;
|
|
};
|
|
|
|
export const getBorderCSSShorthand = (border?: ThemeBorder): string => {
|
|
const values: string[] = [];
|
|
if (border) {
|
|
for (const [key, value] of Object.entries(border)) {
|
|
values.push(key === "thickness" ? value + "px" : value.toString());
|
|
}
|
|
}
|
|
return values.join(" ");
|
|
};
|
|
|
|
export const labelStyle = css`
|
|
font-weight: ${(props) => props.theme.fontWeights[3]};
|
|
`;
|
|
|
|
export const tableScrollBars = css`
|
|
&::-webkit-scrollbar {
|
|
width: ${TABLE_SCROLLBAR_WIDTH}px;
|
|
height: ${TABLE_SCROLLBAR_HEIGHT}px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: var(--wds-color-bg-disabled);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
&:hover {
|
|
&::-webkit-scrollbar-track {
|
|
background: var(--wds-color-bg-disabled);
|
|
border-radius: 10px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: ${getColorWithOpacity(Colors.CHARCOAL, 0.5)};
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const hideScrollbar = css`
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
`;
|
|
|
|
export const thinScrollbar = css``;
|
|
// export const adsTheme: any = {
|
|
// space: [0, 3, 14, 7, 16, 11, 26, 10, 4, 26, 30, 36, 4, 6, 11],
|
|
// };
|
|
// 3, 7, 11, 26
|
|
|
|
export const smallButton = css`
|
|
font-size: ${(props) => props.theme.typography.btnSmall.fontSize}px;
|
|
font-weight: ${(props) => props.theme.typography.btnSmall.fontWeight};
|
|
line-height: ${(props) => props.theme.typography.btnSmall.lineHeight}px;
|
|
letter-spacing: ${(props) => props.theme.typography.btnSmall.letterSpacing}px;
|
|
`;
|
|
|
|
export const mediumButton = css`
|
|
font-size: ${(props) => props.theme.typography.btnMedium.fontSize}px;
|
|
font-weight: ${(props) => props.theme.typography.btnMedium.fontWeight};
|
|
line-height: ${(props) => props.theme.typography.btnMedium.lineHeight}px;
|
|
letter-spacing: ${(props) =>
|
|
props.theme.typography.btnMedium.letterSpacing}px;
|
|
`;
|
|
|
|
export const largeButton = css`
|
|
font-size: ${(props) => props.theme.typography.btnLarge.fontSize}px;
|
|
font-weight: ${(props) => props.theme.typography.btnLarge.fontWeight};
|
|
line-height: ${(props) => props.theme.typography.btnLarge.lineHeight}px;
|
|
letter-spacing: ${(props) => props.theme.typography.btnLarge.letterSpacing}px;
|
|
`;
|
|
|
|
export const appColors = [
|
|
"#FFEFDB",
|
|
"#D9E7FF",
|
|
"#FFDEDE",
|
|
"#E3DEFF",
|
|
"#C7F3E3",
|
|
"#F1DEFF",
|
|
"#F4FFDE",
|
|
"#C7F3F0",
|
|
"#C2DAF0",
|
|
"#F5D1D1",
|
|
"#ECECEC",
|
|
"#CCCCCC",
|
|
"#F3F1C7",
|
|
"#E4D8CC",
|
|
"#EAEDFB",
|
|
"#D6D1F2",
|
|
"#FBF4ED",
|
|
"#FFEBFB",
|
|
] as const;
|
|
|
|
export type AppColorCode = (typeof appColors)[number];
|
|
|
|
const darkShades = [
|
|
"#1A191C",
|
|
"#232324",
|
|
"#262626",
|
|
"#2B2B2B",
|
|
"#404040",
|
|
"#6D6D6D",
|
|
"#9F9F9F",
|
|
"#D4D4D4",
|
|
"#E9E9E9",
|
|
"#FFFFFF",
|
|
"#157A96",
|
|
"#090707",
|
|
"#FFDEDE",
|
|
] as const;
|
|
|
|
const lightShades = [
|
|
"#FAFAFA",
|
|
"#F7F7F7",
|
|
"#F0F0F0",
|
|
"#E8E8E8",
|
|
"#C5C5C5",
|
|
"#A9A7A7",
|
|
"#939090",
|
|
"#716E6E",
|
|
"#4B4848",
|
|
"#302D2D",
|
|
"#090707",
|
|
"#FFFFFF",
|
|
"#6A86CE",
|
|
"#E0DEDE",
|
|
"#EBEBEB",
|
|
"#858282",
|
|
"#000000",
|
|
"#F86A2B",
|
|
"#FFDEDE",
|
|
"#575757",
|
|
"#191919",
|
|
"#E7E7E7",
|
|
] as const;
|
|
|
|
type ShadeColor = (typeof darkShades)[number] | (typeof lightShades)[number];
|
|
|
|
type buttonVariant = {
|
|
main: string;
|
|
light: string;
|
|
dark: string;
|
|
darker: string;
|
|
darkest: string;
|
|
};
|
|
|
|
type ButtonVariantColor = {
|
|
primary: {
|
|
bgColor?: Color;
|
|
borderColor?: Color;
|
|
hoverColor: Color;
|
|
textColor: Color;
|
|
};
|
|
secondary: {
|
|
bgColor?: Color;
|
|
borderColor?: Color;
|
|
hoverColor: Color;
|
|
textColor: Color;
|
|
};
|
|
tertiary: {
|
|
bgColor?: Color;
|
|
borderColor?: Color;
|
|
hoverColor: Color;
|
|
textColor?: Color;
|
|
};
|
|
};
|
|
|
|
type ColorType = {
|
|
overlayColor: string;
|
|
button: {
|
|
disabledText: ShadeColor;
|
|
boxShadow: {
|
|
default: {
|
|
variant1: Color;
|
|
variant2: Color;
|
|
variant3: Color;
|
|
variant4: Color;
|
|
variant5: Color;
|
|
};
|
|
};
|
|
disabled: {
|
|
bgColor: Color;
|
|
textColor: Color;
|
|
};
|
|
/**
|
|
* PRIMARY style
|
|
*/
|
|
primary: ButtonVariantColor;
|
|
|
|
/**
|
|
* WARNING style
|
|
*/
|
|
warning: ButtonVariantColor;
|
|
/**
|
|
* DANGER style
|
|
*/
|
|
danger: ButtonVariantColor;
|
|
/**
|
|
* INFO style
|
|
*/
|
|
info: ButtonVariantColor;
|
|
/**
|
|
* SECONDARY style
|
|
*/
|
|
secondary: ButtonVariantColor;
|
|
/**
|
|
* CUSTOM style
|
|
*/
|
|
custom: {
|
|
solid: {
|
|
dark: {
|
|
textColor: Color;
|
|
};
|
|
light: {
|
|
textColor: Color;
|
|
};
|
|
};
|
|
};
|
|
/**
|
|
* LINK button style
|
|
*/
|
|
link: {
|
|
main: Color;
|
|
hover: Color;
|
|
active: Color;
|
|
disabled: Color;
|
|
};
|
|
};
|
|
tertiary: buttonVariant;
|
|
info: buttonVariant;
|
|
success: buttonVariant;
|
|
warning: buttonVariant;
|
|
danger: buttonVariant;
|
|
homepageBackground: string;
|
|
selected: ShadeColor;
|
|
card: {
|
|
hoverBG: Color;
|
|
hoverBGOpacity: number;
|
|
hoverBorder: ShadeColor;
|
|
iconColor: ShadeColor;
|
|
};
|
|
text: {
|
|
normal: ShadeColor;
|
|
heading: ShadeColor;
|
|
highlight: ShadeColor;
|
|
};
|
|
icon: {
|
|
normal: ShadeColor;
|
|
hover: ShadeColor;
|
|
active: ShadeColor;
|
|
};
|
|
appIcon: {
|
|
normal: ShadeColor;
|
|
background: ShadeColor;
|
|
};
|
|
menu: {
|
|
background: ShadeColor;
|
|
shadow: string;
|
|
};
|
|
menuItem: {
|
|
normalText: ShadeColor;
|
|
normalIcon: ShadeColor;
|
|
hoverIcon: ShadeColor;
|
|
hoverText: ShadeColor;
|
|
hoverBg: ShadeColor;
|
|
warning: {
|
|
color: string;
|
|
bg: string;
|
|
};
|
|
};
|
|
navigationMenu: {
|
|
contentActive: string;
|
|
backgroundActive: string;
|
|
contentInactive: string;
|
|
backgroundInactive: string;
|
|
label: string;
|
|
warning: string;
|
|
warningBackground: string;
|
|
};
|
|
colorSelector: {
|
|
shadow: ShadeColor;
|
|
checkmark: ShadeColor;
|
|
};
|
|
checkbox: {
|
|
disabled: ShadeColor;
|
|
unchecked: ShadeColor;
|
|
disabledCheck: ShadeColor;
|
|
normalCheck: ShadeColor;
|
|
labelColor: ShadeColor;
|
|
};
|
|
dropdown: {
|
|
header: {
|
|
text: ShadeColor;
|
|
disabledText: ShadeColor;
|
|
defaultBg: ShadeColor;
|
|
bg: ShadeColor;
|
|
disabledBg: ShadeColor;
|
|
};
|
|
menu: {
|
|
border: ShadeColor;
|
|
bg: ShadeColor;
|
|
hover: ShadeColor;
|
|
text: ShadeColor;
|
|
hoverText: ShadeColor;
|
|
subText: ShadeColor;
|
|
};
|
|
menuShadow: string;
|
|
selected: {
|
|
text: ShadeColor;
|
|
bg: ShadeColor;
|
|
icon: ShadeColor;
|
|
subtext?: ShadeColor;
|
|
};
|
|
hovered: {
|
|
text: ShadeColor;
|
|
bg: ShadeColor;
|
|
icon: ShadeColor;
|
|
};
|
|
icon: ShadeColor;
|
|
};
|
|
toggle: {
|
|
bg: ShadeColor;
|
|
hover: {
|
|
on: string;
|
|
off: string;
|
|
};
|
|
disable: {
|
|
on: string;
|
|
off: ShadeColor;
|
|
};
|
|
disabledSlider: {
|
|
on: ShadeColor;
|
|
off: ShadeColor;
|
|
};
|
|
spinner: ShadeColor;
|
|
spinnerBg: ShadeColor;
|
|
};
|
|
textInput: {
|
|
disable: {
|
|
bg: ShadeColor;
|
|
text: ShadeColor;
|
|
border: ShadeColor;
|
|
};
|
|
normal: {
|
|
bg: ShadeColor;
|
|
text: ShadeColor;
|
|
border: ShadeColor;
|
|
};
|
|
placeholder: ShadeColor;
|
|
helper: ShadeColor;
|
|
icon: ShadeColor;
|
|
readOnly: {
|
|
bg: ShadeColor;
|
|
border: ShadeColor;
|
|
text: ShadeColor;
|
|
};
|
|
hover: {
|
|
bg: ShadeColor;
|
|
};
|
|
caretColor: string;
|
|
};
|
|
menuBorder: ShadeColor;
|
|
editableText: {
|
|
color: ShadeColor;
|
|
bg: ShadeColor;
|
|
dangerBg: string;
|
|
};
|
|
radio: {
|
|
disable: ShadeColor;
|
|
border: ShadeColor;
|
|
text: ShadeColor;
|
|
};
|
|
searchInput: {
|
|
placeholder: ShadeColor;
|
|
text: ShadeColor;
|
|
border: ShadeColor;
|
|
bg: ShadeColor;
|
|
icon: {
|
|
focused: ShadeColor;
|
|
normal: ShadeColor;
|
|
};
|
|
};
|
|
spinner: ShadeColor;
|
|
tableDropdown: {
|
|
bg: ShadeColor;
|
|
selectedBg: ShadeColor;
|
|
selectedText: ShadeColor;
|
|
shadow: string;
|
|
};
|
|
tabs: {
|
|
normal: ShadeColor;
|
|
icon: ShadeColor;
|
|
hover: ShadeColor;
|
|
border: ShadeColor;
|
|
countBg: ShadeColor;
|
|
selected: string;
|
|
};
|
|
settingHeading: ShadeColor;
|
|
table: {
|
|
headerBg: ShadeColor;
|
|
headerText: ShadeColor;
|
|
rowData: ShadeColor;
|
|
rowTitle: ShadeColor;
|
|
border: ShadeColor;
|
|
hover: {
|
|
headerColor: ShadeColor;
|
|
rowBg: ShadeColor;
|
|
rowTitle: ShadeColor;
|
|
rowData: ShadeColor;
|
|
};
|
|
};
|
|
applications: {
|
|
bg: ShadeColor;
|
|
textColor: ShadeColor;
|
|
workspaceColor: ShadeColor;
|
|
iconColor: ShadeColor;
|
|
hover: {
|
|
bg: ShadeColor;
|
|
textColor: ShadeColor;
|
|
workspaceColor: ShadeColor;
|
|
};
|
|
cardMenuIcon: ShadeColor;
|
|
};
|
|
switch: {
|
|
border: ShadeColor;
|
|
bg: ShadeColor;
|
|
hover: {
|
|
bg: ShadeColor;
|
|
};
|
|
lightText: ShadeColor;
|
|
darkText: ShadeColor;
|
|
};
|
|
queryTemplate: {
|
|
bg: ShadeColor;
|
|
color: ShadeColor;
|
|
};
|
|
profileDropdown: {
|
|
name: ShadeColor;
|
|
userName: ShadeColor;
|
|
};
|
|
modal: {
|
|
bg: ShadeColor;
|
|
headerText: ShadeColor;
|
|
iconColor: string;
|
|
iconBg: ShadeColor;
|
|
user: {
|
|
textColor: ShadeColor;
|
|
};
|
|
email: {
|
|
message: ShadeColor;
|
|
desc: ShadeColor;
|
|
};
|
|
manageUser: ShadeColor;
|
|
scrollbar: ShadeColor;
|
|
separator: ShadeColor;
|
|
title: ShadeColor;
|
|
link: string;
|
|
hoverState: ShadeColor;
|
|
};
|
|
tagInput: {
|
|
bg: ShadeColor;
|
|
tag: {
|
|
text: ShadeColor;
|
|
};
|
|
text: ShadeColor;
|
|
placeholder: ShadeColor;
|
|
shadow: string;
|
|
};
|
|
callout: {
|
|
info: {
|
|
color: string;
|
|
bgColor: string;
|
|
};
|
|
success: {
|
|
color: string;
|
|
bgColor: string;
|
|
};
|
|
danger: {
|
|
color: string;
|
|
bgColor: string;
|
|
};
|
|
warning: {
|
|
color: string;
|
|
bgColor: string;
|
|
};
|
|
};
|
|
loader: {
|
|
light: ShadeColor;
|
|
dark: ShadeColor;
|
|
};
|
|
filePicker: {
|
|
bg: ShadeColor;
|
|
color: ShadeColor;
|
|
progress: ShadeColor;
|
|
shadow: {
|
|
from: string;
|
|
to: string;
|
|
};
|
|
};
|
|
formFooter: {
|
|
cancelBtn: ShadeColor;
|
|
};
|
|
toast: {
|
|
undo: string;
|
|
undoRedoColor: string;
|
|
warningColor: string;
|
|
dangerColor: string;
|
|
textColor: string;
|
|
bg: ShadeColor;
|
|
};
|
|
multiSwitch: {
|
|
bg: ShadeColor;
|
|
selectedBg: ShadeColor;
|
|
text: ShadeColor;
|
|
border: string;
|
|
};
|
|
apiPane: {
|
|
bg: ShadeColor;
|
|
text: ShadeColor;
|
|
keyValueText?: ShadeColor;
|
|
dividerBg: ShadeColor;
|
|
iconHoverBg: ShadeColor;
|
|
tabBg: ShadeColor;
|
|
requestTree: {
|
|
bg: string;
|
|
header: {
|
|
text: string;
|
|
icon: string;
|
|
bg: string;
|
|
};
|
|
row: {
|
|
hoverBg: string;
|
|
key: string;
|
|
value: string;
|
|
};
|
|
};
|
|
closeIcon: ShadeColor;
|
|
responseBody: {
|
|
bg: ShadeColor;
|
|
};
|
|
codeEditor: {
|
|
placeholderColor: ShadeColor;
|
|
};
|
|
body: {
|
|
text: string;
|
|
};
|
|
settings: {
|
|
textColor: ShadeColor;
|
|
};
|
|
pagination: {
|
|
label: ShadeColor;
|
|
description: ShadeColor;
|
|
stepTitle: ShadeColor;
|
|
numberBg: string;
|
|
bindingBg: ShadeColor;
|
|
numberColor: ShadeColor;
|
|
};
|
|
};
|
|
codeMirror: {
|
|
background: {
|
|
defaultState: string;
|
|
hoverState: string;
|
|
};
|
|
text: string;
|
|
dataType: {
|
|
shortForm: string;
|
|
fullForm: string;
|
|
};
|
|
};
|
|
floatingBtn: any;
|
|
auth: any;
|
|
formMessage: Record<string, Record<Intent, string>>;
|
|
header: {
|
|
separator: string;
|
|
appName: ShadeColor;
|
|
background: string;
|
|
deployToolTipBackground: string;
|
|
deployToolTipText: ShadeColor;
|
|
shareBtnHighlight: string;
|
|
shareBtn: string;
|
|
tabsHorizontalSeparator: string;
|
|
tabText: string;
|
|
activeTabBorderBottom: string;
|
|
activeTabText: string;
|
|
};
|
|
guidedTour: {
|
|
runButton: string;
|
|
cancelButton: {
|
|
color: string;
|
|
borderColor: string;
|
|
hoverBackgroundColor: string;
|
|
};
|
|
endButton: {
|
|
backgroundColor: string;
|
|
borderColor: string;
|
|
hoverBackgroundColor: string;
|
|
};
|
|
endTourButton: {
|
|
color: string;
|
|
hoverColor: string;
|
|
};
|
|
card: {
|
|
borderBottom: string;
|
|
background: string;
|
|
};
|
|
stepCountBackground: string;
|
|
};
|
|
globalSearch: {
|
|
containerBackground: string;
|
|
activeSearchItemBackground: string;
|
|
activeCategory: string;
|
|
searchInputText: string;
|
|
containerShadow: string;
|
|
separator: string;
|
|
searchItemHighlight: string;
|
|
searchItemAltText: string;
|
|
searchItemText: string;
|
|
searchItemSubText: string;
|
|
highlightedTextUnderline: string;
|
|
documentationCtaBackground: string;
|
|
documentationCtaText: string;
|
|
emptyStateText: string;
|
|
navigateUsingEnterSection: string;
|
|
codeBackground: string;
|
|
documentationCodeBackground: string;
|
|
documentLink: string;
|
|
helpBarText: string;
|
|
helpBarBackground: string;
|
|
helpButtonBackground: string;
|
|
helpIcon: string;
|
|
sectionTitle: string;
|
|
navigateToEntityEnterkey: string;
|
|
primaryBgColor: string;
|
|
primaryTextColor: string;
|
|
secondaryTextColor: string;
|
|
primaryBorderColor: string;
|
|
defaultIconsColor: string;
|
|
snippets: {
|
|
refinementPillsColor: string;
|
|
refinementPillsBg: string;
|
|
filterListBackground: string;
|
|
filterBtnText: string;
|
|
codeContainerBorder: string;
|
|
};
|
|
searchInputBorder: string;
|
|
};
|
|
gif: {
|
|
overlay: string;
|
|
text: string;
|
|
iconPath: string;
|
|
iconCircle: string;
|
|
};
|
|
toggleMode: {
|
|
activeModeBackground: string;
|
|
activeModeIcon: string;
|
|
modeIcon: string;
|
|
unreadIndicator: string;
|
|
modeIconCircleStroke: string;
|
|
activeModeIconCircleStroke: string;
|
|
};
|
|
mentionSuggestion: {
|
|
nameText: string;
|
|
usernameText: string;
|
|
hover: string;
|
|
};
|
|
reactionsComponent: {
|
|
reactionBackground: string;
|
|
reactionBackgroundActive: string;
|
|
text: string;
|
|
textActive: string;
|
|
};
|
|
treeDropdown: {
|
|
targetBg: string;
|
|
targetIcon: {
|
|
normal: string;
|
|
hover: string;
|
|
};
|
|
menuShadow: string;
|
|
menuBg: {
|
|
normal: ShadeColor;
|
|
hover: ShadeColor;
|
|
selected: ShadeColor;
|
|
};
|
|
menuText: {
|
|
normal: ShadeColor;
|
|
hover: ShadeColor;
|
|
selected: ShadeColor;
|
|
};
|
|
};
|
|
propertyPane: {
|
|
title: ShadeColor;
|
|
bg: ShadeColor;
|
|
label: ShadeColor;
|
|
jsIconBg: ShadeColor;
|
|
buttonBg: ShadeColor;
|
|
buttonText: ShadeColor;
|
|
radioGroupBg: ShadeColor;
|
|
radioGroupText: ShadeColor;
|
|
deleteIconColor: string;
|
|
zoomButtonBG: ShadeColor;
|
|
activeButtonText: ShadeColor;
|
|
jsButtonHoverBG: ShadeColor;
|
|
dropdownSelectBg: ShadeColor;
|
|
multiDropdownBoxHoverBg: ShadeColor;
|
|
iconColor: ShadeColor;
|
|
ctaTextColor: string;
|
|
ctaBackgroundColor: string;
|
|
ctaLearnMoreTextColor: string;
|
|
connections: {
|
|
error: string;
|
|
connectionsCount: ShadeColor;
|
|
optionBg: string;
|
|
};
|
|
};
|
|
scrollbar: string;
|
|
scrollbarBG: string;
|
|
debugger: {
|
|
background: string;
|
|
messageTextColor: string;
|
|
label: string;
|
|
entity: string;
|
|
entityLink: string;
|
|
evalDebugButton: {
|
|
hover: string;
|
|
active: string;
|
|
};
|
|
inspectElement: {
|
|
color: string;
|
|
};
|
|
floatingButton: {
|
|
background: string;
|
|
color: string;
|
|
shadow: string;
|
|
errorCount: string;
|
|
noErrorCount: string;
|
|
warningCount: string;
|
|
};
|
|
blankState: {
|
|
shortcut: string;
|
|
color: string;
|
|
};
|
|
info: {
|
|
time: string;
|
|
borderBottom: string;
|
|
};
|
|
warning: {
|
|
time: string;
|
|
borderBottom: string;
|
|
backgroundColor: string;
|
|
iconColor: string;
|
|
hoverIconColor: string;
|
|
};
|
|
error: {
|
|
time: string;
|
|
type: string;
|
|
borderBottom: string;
|
|
backgroundColor: string;
|
|
iconColor: string;
|
|
hoverIconColor: string;
|
|
};
|
|
jsonIcon: string;
|
|
collapseIcon: string;
|
|
message: string;
|
|
};
|
|
helpModal: {
|
|
itemHighlight: string;
|
|
background: string;
|
|
};
|
|
showcaseCarousel: Record<string, string>;
|
|
displayImageUpload: Record<string, string>;
|
|
widgetGroupingContextMenu: {
|
|
border: string;
|
|
actionActiveBg: string;
|
|
};
|
|
actionSidePane: {
|
|
noConnections: string;
|
|
noConnectionsText: string;
|
|
connectionBorder: string;
|
|
connectionHover: string;
|
|
collapsibleIcon: string;
|
|
};
|
|
tabItemBackgroundFill: {
|
|
highlightBackground: string;
|
|
highlightTextColor: string;
|
|
textColor: string;
|
|
};
|
|
numberedStep: {
|
|
line: string;
|
|
};
|
|
gitSyncModal: GitSyncModalColors;
|
|
editorBottomBar: {
|
|
background: string;
|
|
buttonBackgroundHover: string;
|
|
branchBtnText: string;
|
|
};
|
|
link: string;
|
|
welcomePage?: {
|
|
text: string;
|
|
};
|
|
settings: {
|
|
link: string;
|
|
};
|
|
};
|
|
|
|
const editorBottomBar = {
|
|
background: Colors.WHITE,
|
|
buttonBackgroundHover: Colors.Gallery,
|
|
branchBtnText: Colors.CHARCOAL,
|
|
};
|
|
|
|
const gitSyncModal = {
|
|
menuBackgroundColor: Colors.ALABASTER_ALT,
|
|
separator: Colors.ALTO2,
|
|
closeIcon: Colors.SCORPION,
|
|
closeIconHover: Colors.GREY_900,
|
|
};
|
|
type GitSyncModalColors = typeof gitSyncModal;
|
|
|
|
const tabItemBackgroundFill = {
|
|
highlightBackground: Colors.Gallery,
|
|
highlightTextColor: Colors.COD_GRAY,
|
|
textColor: Colors.CHARCOAL,
|
|
};
|
|
|
|
const displayImageUpload = {
|
|
background: "#AEBAD9",
|
|
label: "#457AE6",
|
|
};
|
|
|
|
const showcaseCarousel = {
|
|
activeStepDot: "#F86A2B",
|
|
inactiveStepDot: "#FEEDE5",
|
|
};
|
|
|
|
const reactionsComponent = {
|
|
reactionBackground: lightShades[2],
|
|
reactionBackgroundActive: "#FEEDE5",
|
|
text: lightShades[7],
|
|
textActive: "#BF4109",
|
|
borderActive: "#BF4109",
|
|
};
|
|
|
|
const mentionSuggestion = {
|
|
nameText: "#090707",
|
|
usernameText: "#716E6E",
|
|
hover: "#EBEBEB",
|
|
};
|
|
|
|
const toggleMode = {
|
|
activeModeBackground: "#EBEBEB",
|
|
activeModeIcon: "#4B4848",
|
|
modeIcon: "#858282",
|
|
modeIconCircleStroke: "#fff",
|
|
activeModeIconCircleStroke: "#EBEBEB",
|
|
unreadIndicator: "#E00D0D",
|
|
};
|
|
|
|
const auth = {
|
|
background: lightShades[11],
|
|
cardBackground: lightShades[0],
|
|
btnPrimary: Colors.CRUSTA,
|
|
inputBackground: lightShades[11],
|
|
headingText: darkShades[11],
|
|
link: Colors.CRUSTA,
|
|
text: "#000",
|
|
placeholder: lightShades[8],
|
|
socialBtnText: "#000",
|
|
socialBtnBorder: lightShades[13],
|
|
socialBtnHighlight: lightShades[2],
|
|
};
|
|
|
|
const helpModal = {
|
|
itemHighlight: "#231f20",
|
|
background: "#262626",
|
|
};
|
|
|
|
const formMessage = {
|
|
background: {
|
|
danger: "rgba(226,44,44,0.08)",
|
|
success: "#172320",
|
|
warning: "rgba(224, 179, 14, 0.08)",
|
|
lightSuccess: "#EFFFF4",
|
|
},
|
|
text: {
|
|
danger: "#E22C2C",
|
|
success: "#03B365",
|
|
warning: "#E0B30E",
|
|
lightSuccess: "#00693B",
|
|
},
|
|
};
|
|
|
|
const globalSearch = {
|
|
containerBackground:
|
|
"linear-gradient(0deg, rgba(43, 43, 43, 0.9), rgba(43, 43, 43, 0.9)), linear-gradient(119.61deg, rgba(35, 35, 35, 0.01) 0.43%, rgba(49, 49, 49, 0.01) 100.67%);",
|
|
activeSearchItemBackground: "#EBEBEB",
|
|
activeCategory: "#090707",
|
|
searchInputText: "#090707",
|
|
searchInputBorder: "#F86A2B",
|
|
containerShadow: "0px 0px 32px 8px rgba(0, 0, 0, 0.25)",
|
|
separator: "#424242",
|
|
searchItemHighlight: "#fff",
|
|
searchItemAltText: "#fff",
|
|
searchItemText: "#090707",
|
|
searchItemSubText: "#4B4848;",
|
|
highlightedTextUnderline: "#03B365",
|
|
helpBarText: "#C2C2C2",
|
|
documentationCtaBackground: "rgba(3, 179, 101, 0.1)",
|
|
documentationCtaText: "#03B365",
|
|
emptyStateText: "#A9A7A7",
|
|
navigateUsingEnterSection: "white",
|
|
codeBackground: "#ffffff",
|
|
documentationCodeBackground: "#f0f0f0",
|
|
documentLink: "#F86A2B",
|
|
helpBarBackground: "#000",
|
|
helpButtonBackground: "#000",
|
|
helpIcon: "#D4D4D4",
|
|
sectionTitle: "#716E6E",
|
|
navigateToEntityEnterkey: "#090707",
|
|
primaryBgColor: "#ffffff",
|
|
primaryTextColor: "#090707",
|
|
secondaryTextColor: "#4b4848",
|
|
primaryBorderColor: "#E0DEDE",
|
|
defaultIconsColor: "#716e6e",
|
|
snippets: {
|
|
refinementPillsColor: "#4b4848",
|
|
refinementPillsBg: "white",
|
|
filterListBackground: lightShades[0],
|
|
filterBtnText: lightShades[8],
|
|
filterBtnBg: "#FAFAFA",
|
|
codeContainerBorder: "#E0DEDE",
|
|
},
|
|
};
|
|
|
|
const actionSidePane = {
|
|
noConnections: "#f0f0f0",
|
|
noConnectionsText: "#e0dede",
|
|
connectionBorder: "rgba(0, 0, 0, 0.5)",
|
|
connectionHover: "#6a86ce",
|
|
collapsibleIcon: Colors.CODE_GRAY,
|
|
};
|
|
const navigationMenu = {
|
|
contentActive: "#F0F0F0",
|
|
backgroundActive: "#222222",
|
|
contentInactive: "#858282",
|
|
backgroundInactive: "#090707",
|
|
label: "#A9A7A7",
|
|
warning: "#EABB0C",
|
|
warningBackground: "#3A3628",
|
|
};
|
|
|
|
const guidedTour = {
|
|
runButton: "#f86a2b",
|
|
cancelButton: {
|
|
color: "#716e6e",
|
|
borderColor: "#716e6e",
|
|
hoverBackgroundColor: "#f1f1f1",
|
|
},
|
|
endButton: {
|
|
backgroundColor: "#f22b2b",
|
|
borderColor: "#f22b2b",
|
|
hoverBackgroundColor: "#f34040",
|
|
},
|
|
endTourButton: {
|
|
color: "#4b4848",
|
|
hoverColor: "#928f8f",
|
|
},
|
|
card: {
|
|
borderBottom: "#eeeeee",
|
|
background: "#ffefdb",
|
|
},
|
|
stepCountBackground: "#090707",
|
|
};
|
|
|
|
const numberedStep = {
|
|
line: Colors.ALTO2,
|
|
number: Colors.BLACK,
|
|
};
|
|
|
|
export const dark: ColorType = {
|
|
editorBottomBar,
|
|
gitSyncModal,
|
|
numberedStep,
|
|
tabItemBackgroundFill,
|
|
overlayColor: "#090707cc",
|
|
displayImageUpload,
|
|
showcaseCarousel,
|
|
mentionSuggestion,
|
|
reactionsComponent,
|
|
helpModal,
|
|
globalSearch,
|
|
toggleMode,
|
|
navigationMenu,
|
|
selected: darkShades[10],
|
|
header: {
|
|
separator: darkShades[4],
|
|
appName: darkShades[7],
|
|
background: darkShades[2],
|
|
deployToolTipBackground: lightShades[10],
|
|
deployToolTipText: darkShades[7],
|
|
shareBtnHighlight: "#F86A2B",
|
|
shareBtn: "#fff",
|
|
tabsHorizontalSeparator: "#EFEFEF",
|
|
tabText: "#6F6D6D",
|
|
activeTabBorderBottom: "#FF6D2D",
|
|
activeTabText: "#000",
|
|
},
|
|
button: {
|
|
disabledText: darkShades[6],
|
|
boxShadow: {
|
|
default: {
|
|
variant1: Colors.BOX_SHADOW_DEFAULT_VARIANT1,
|
|
variant2: Colors.BOX_SHADOW_DEFAULT_VARIANT2,
|
|
variant3: Colors.BOX_SHADOW_DEFAULT_VARIANT3,
|
|
variant4: Colors.BOX_SHADOW_DEFAULT_VARIANT4,
|
|
variant5: Colors.BOX_SHADOW_DEFAULT_VARIANT5,
|
|
},
|
|
},
|
|
disabled: {
|
|
bgColor: Colors.GREY_1,
|
|
textColor: Colors.GREY_4,
|
|
},
|
|
primary: {
|
|
primary: {
|
|
bgColor: Colors.GREEN,
|
|
hoverColor: Colors.PRIMARY_SOLID_HOVER,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.GREEN,
|
|
hoverColor: Colors.PRIMARY_OUTLINE_HOVER,
|
|
textColor: Colors.GREEN,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.PRIMARY_GHOST_HOVER,
|
|
},
|
|
},
|
|
warning: {
|
|
primary: {
|
|
bgColor: Colors.WARNING_SOLID,
|
|
hoverColor: Colors.WARNING_SOLID_HOVER,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.WARNING_SOLID,
|
|
hoverColor: Colors.WARNING_OUTLINE_HOVER,
|
|
textColor: Colors.WARNING_SOLID,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.WARNING_GHOST_HOVER,
|
|
},
|
|
},
|
|
danger: {
|
|
primary: {
|
|
bgColor: Colors.DANGER_SOLID,
|
|
hoverColor: Colors.DANGER_SOLID_HOVER,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.DANGER_SOLID,
|
|
hoverColor: Colors.DANGER_NO_SOLID_HOVER,
|
|
textColor: Colors.DANGER_SOLID,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.DANGER_NO_SOLID_HOVER,
|
|
},
|
|
},
|
|
info: {
|
|
primary: {
|
|
bgColor: Colors.INFO_SOLID,
|
|
hoverColor: Colors.INFO_SOLID_HOVER,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.INFO_SOLID,
|
|
hoverColor: Colors.INFO_NO_SOLID_HOVER,
|
|
textColor: Colors.INFO_SOLID,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.INFO_NO_SOLID_HOVER,
|
|
},
|
|
},
|
|
secondary: {
|
|
primary: {
|
|
bgColor: Colors.GRAY,
|
|
hoverColor: Colors.CHARCOAL,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.GRAY,
|
|
hoverColor: Colors.Gallery,
|
|
textColor: Colors.GRAY,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.MERCURY,
|
|
},
|
|
},
|
|
custom: {
|
|
solid: {
|
|
dark: {
|
|
textColor: Colors.CUSTOM_SOLID_DARK_TEXT_COLOR,
|
|
},
|
|
light: {
|
|
textColor: Colors.WHITE,
|
|
},
|
|
},
|
|
},
|
|
link: {
|
|
main: "#D4D4D4",
|
|
hover: "#FFFFFF",
|
|
active: "#2B2B2B",
|
|
disabled: "#202021",
|
|
},
|
|
},
|
|
tertiary: {
|
|
main: "#D4D4D4",
|
|
light: "#FFFFFF",
|
|
dark: "#2B2B2B",
|
|
darker: "#202021",
|
|
darkest: "#1A191C",
|
|
},
|
|
info: {
|
|
main: "#CB4810",
|
|
light: "#F86A2B",
|
|
dark: "#8B2E05",
|
|
darker: "#A03C12",
|
|
darkest: "#2B2B2B",
|
|
},
|
|
success: {
|
|
main: "#218358",
|
|
light: "#30CF89",
|
|
dark: "#0F4B30",
|
|
darker: "#17211E",
|
|
darkest: "#293835",
|
|
},
|
|
warning: {
|
|
main: "#EABB0C",
|
|
light: "#FFD32E",
|
|
dark: "#886B00",
|
|
darker: "#2C271A",
|
|
darkest: "#2F2A1B",
|
|
},
|
|
danger: {
|
|
main: "#E22C2C",
|
|
light: "#FF4D4D",
|
|
dark: "#830C0C",
|
|
darker: "#2B1A1D",
|
|
darkest: "#462F32",
|
|
},
|
|
homepageBackground: "#1C1C1E",
|
|
card: {
|
|
hoverBG: Colors.BLACK,
|
|
hoverBGOpacity: 0.5,
|
|
hoverBorder: darkShades[4],
|
|
iconColor: darkShades[9],
|
|
},
|
|
text: {
|
|
normal: darkShades[6],
|
|
heading: darkShades[7],
|
|
highlight: darkShades[9],
|
|
},
|
|
icon: {
|
|
normal: darkShades[6],
|
|
hover: darkShades[8],
|
|
active: darkShades[9],
|
|
},
|
|
appIcon: {
|
|
normal: darkShades[9],
|
|
background: darkShades[1],
|
|
},
|
|
menu: {
|
|
background: darkShades[3],
|
|
shadow: "rgba(0, 0, 0, 0.75)",
|
|
},
|
|
menuItem: {
|
|
normalText: darkShades[7],
|
|
normalIcon: darkShades[6],
|
|
hoverIcon: darkShades[8],
|
|
hoverText: darkShades[9],
|
|
hoverBg: darkShades[4],
|
|
warning: {
|
|
color: "#EABB0C",
|
|
bg: "#3A3628",
|
|
},
|
|
},
|
|
colorSelector: {
|
|
shadow: darkShades[4],
|
|
checkmark: darkShades[9],
|
|
},
|
|
checkbox: {
|
|
disabled: darkShades[3],
|
|
unchecked: darkShades[4],
|
|
disabledCheck: darkShades[5],
|
|
normalCheck: darkShades[9],
|
|
labelColor: darkShades[7],
|
|
},
|
|
dropdown: {
|
|
header: {
|
|
text: darkShades[7],
|
|
disabledText: darkShades[6],
|
|
defaultBg: "#090707",
|
|
bg: "#090707",
|
|
disabledBg: darkShades[2],
|
|
},
|
|
menu: {
|
|
border: darkShades[3],
|
|
bg: darkShades[3],
|
|
text: darkShades[9],
|
|
hover: darkShades[4],
|
|
hoverText: darkShades[9],
|
|
subText: darkShades[9],
|
|
},
|
|
menuShadow: "0px 12px 28px -8px rgba(0, 0, 0, 0.75)",
|
|
selected: {
|
|
text: darkShades[9],
|
|
bg: darkShades[4],
|
|
icon: darkShades[8],
|
|
},
|
|
hovered: {
|
|
text: darkShades[9],
|
|
bg: darkShades[10],
|
|
icon: darkShades[8],
|
|
},
|
|
icon: darkShades[6],
|
|
},
|
|
toggle: {
|
|
bg: darkShades[4],
|
|
hover: {
|
|
on: "#F56426",
|
|
off: "#5E5E5E",
|
|
},
|
|
disable: {
|
|
on: "#3D2219",
|
|
off: darkShades[3],
|
|
},
|
|
disabledSlider: {
|
|
on: darkShades[9],
|
|
off: darkShades[5],
|
|
},
|
|
spinner: darkShades[6],
|
|
spinnerBg: darkShades[4],
|
|
},
|
|
textInput: {
|
|
disable: {
|
|
bg: darkShades[2],
|
|
text: darkShades[6],
|
|
border: darkShades[2],
|
|
},
|
|
normal: {
|
|
bg: lightShades[10],
|
|
border: darkShades[0],
|
|
text: darkShades[7],
|
|
},
|
|
placeholder: darkShades[5],
|
|
helper: darkShades[5],
|
|
icon: darkShades[7],
|
|
readOnly: {
|
|
bg: darkShades[0],
|
|
border: darkShades[0],
|
|
text: darkShades[7],
|
|
},
|
|
hover: {
|
|
bg: darkShades[0],
|
|
},
|
|
caretColor: Colors.WHITE,
|
|
},
|
|
menuBorder: darkShades[4],
|
|
editableText: {
|
|
color: darkShades[9],
|
|
bg: darkShades[1],
|
|
dangerBg: "rgba(226, 44, 44, 0.08)",
|
|
},
|
|
radio: {
|
|
disable: darkShades[5],
|
|
border: darkShades[4],
|
|
text: lightShades[11],
|
|
},
|
|
searchInput: {
|
|
placeholder: darkShades[5],
|
|
text: darkShades[9],
|
|
border: darkShades[4],
|
|
bg: darkShades[2],
|
|
icon: {
|
|
focused: darkShades[7],
|
|
normal: darkShades[5],
|
|
},
|
|
},
|
|
spinner: darkShades[6],
|
|
tableDropdown: {
|
|
bg: darkShades[3],
|
|
selectedBg: darkShades[4],
|
|
selectedText: darkShades[9],
|
|
shadow: "rgba(0, 0, 0, 0.75)",
|
|
},
|
|
tabs: {
|
|
normal: darkShades[6],
|
|
icon: darkShades[6],
|
|
hover: darkShades[7],
|
|
border: darkShades[3],
|
|
countBg: darkShades[4],
|
|
selected: Colors.CRUSTA,
|
|
},
|
|
settingHeading: darkShades[9],
|
|
table: {
|
|
headerBg: darkShades[2],
|
|
headerText: darkShades[5],
|
|
rowData: darkShades[6],
|
|
rowTitle: darkShades[7],
|
|
border: darkShades[3],
|
|
hover: {
|
|
headerColor: darkShades[7],
|
|
rowBg: darkShades[4],
|
|
rowTitle: darkShades[9],
|
|
rowData: darkShades[7],
|
|
},
|
|
},
|
|
applications: {
|
|
bg: darkShades[4],
|
|
textColor: darkShades[7],
|
|
workspaceColor: darkShades[7],
|
|
iconColor: darkShades[7],
|
|
hover: {
|
|
bg: darkShades[5],
|
|
textColor: darkShades[8],
|
|
workspaceColor: darkShades[9],
|
|
},
|
|
cardMenuIcon: darkShades[7],
|
|
},
|
|
switch: {
|
|
border: darkShades[5],
|
|
bg: darkShades[0],
|
|
hover: {
|
|
bg: darkShades[0],
|
|
},
|
|
lightText: darkShades[9],
|
|
darkText: darkShades[6],
|
|
},
|
|
queryTemplate: {
|
|
bg: darkShades[3],
|
|
color: darkShades[7],
|
|
},
|
|
profileDropdown: {
|
|
name: darkShades[10],
|
|
userName: darkShades[7],
|
|
},
|
|
modal: {
|
|
bg: darkShades[1],
|
|
headerText: darkShades[9],
|
|
iconColor: "#6D6D6D",
|
|
iconBg: darkShades[12],
|
|
user: {
|
|
textColor: darkShades[7],
|
|
},
|
|
email: {
|
|
message: darkShades[8],
|
|
desc: darkShades[6],
|
|
},
|
|
manageUser: darkShades[6],
|
|
scrollbar: darkShades[5],
|
|
separator: darkShades[4],
|
|
title: darkShades[8],
|
|
link: "#F86A2B",
|
|
hoverState: darkShades[3],
|
|
},
|
|
tagInput: {
|
|
bg: "#090707",
|
|
tag: {
|
|
text: darkShades[9],
|
|
},
|
|
text: darkShades[9],
|
|
placeholder: darkShades[5],
|
|
shadow: "none",
|
|
},
|
|
callout: {
|
|
info: {
|
|
color: "#EE5A1A",
|
|
bgColor: "#241C1B",
|
|
},
|
|
success: {
|
|
color: "#30CF89",
|
|
bgColor: "#17211E",
|
|
},
|
|
danger: {
|
|
color: "#FF4D4D",
|
|
bgColor: "#2B1A1D",
|
|
},
|
|
warning: {
|
|
color: "#E0B30E",
|
|
bgColor: "#29251A",
|
|
},
|
|
},
|
|
loader: {
|
|
light: darkShades[2],
|
|
dark: darkShades[4],
|
|
},
|
|
filePicker: {
|
|
bg: darkShades[1],
|
|
color: darkShades[7],
|
|
progress: darkShades[6],
|
|
shadow: {
|
|
from: "rgba(21, 17, 17, 0.0001)",
|
|
to: "rgba(9, 7, 7, 0.883386)",
|
|
},
|
|
},
|
|
formFooter: {
|
|
cancelBtn: darkShades[9],
|
|
},
|
|
toast: {
|
|
undo: "#CB4810",
|
|
undoRedoColor: "#F8682B",
|
|
warningColor: "#E0B30E",
|
|
dangerColor: "#E22C2C",
|
|
textColor: "#090707",
|
|
bg: darkShades[8],
|
|
},
|
|
multiSwitch: {
|
|
bg: darkShades[2],
|
|
selectedBg: lightShades[10],
|
|
text: darkShades[8],
|
|
border: darkShades[3],
|
|
},
|
|
apiPane: {
|
|
bg: darkShades[0],
|
|
tabBg: lightShades[10],
|
|
text: darkShades[6],
|
|
keyValueText: lightShades[8],
|
|
dividerBg: darkShades[4],
|
|
iconHoverBg: darkShades[1],
|
|
requestTree: {
|
|
bg: lightShades[10],
|
|
header: {
|
|
text: darkShades[7],
|
|
icon: darkShades[7],
|
|
bg: darkShades[1],
|
|
},
|
|
row: {
|
|
hoverBg: darkShades[1],
|
|
key: darkShades[6],
|
|
value: darkShades[7],
|
|
},
|
|
},
|
|
closeIcon: darkShades[9],
|
|
responseBody: {
|
|
bg: "#090707",
|
|
},
|
|
codeEditor: {
|
|
placeholderColor: darkShades[5],
|
|
},
|
|
body: {
|
|
text: "#6D6D6D",
|
|
},
|
|
settings: {
|
|
textColor: "#FFFFFF",
|
|
},
|
|
pagination: {
|
|
label: darkShades[7],
|
|
description: darkShades[5],
|
|
stepTitle: darkShades[9],
|
|
numberBg: darkShades[3],
|
|
bindingBg: darkShades[4],
|
|
numberColor: lightShades[11],
|
|
},
|
|
},
|
|
codeMirror: {
|
|
background: {
|
|
defaultState: "#262626",
|
|
hoverState: darkShades[10],
|
|
},
|
|
text: "#FFFFFF",
|
|
dataType: {
|
|
shortForm: "#858282",
|
|
fullForm: "#6D6D6D",
|
|
},
|
|
},
|
|
floatingBtn: {
|
|
tagBackground: "#e22c2c",
|
|
backgroundColor: darkShades[3],
|
|
iconColor: darkShades[6],
|
|
borderColor: darkShades[7],
|
|
},
|
|
auth,
|
|
formMessage,
|
|
gif: {
|
|
overlay: "#000000",
|
|
text: "#d4d4d4",
|
|
iconPath: "#2b2b2b",
|
|
iconCircle: "#d4d4d4",
|
|
},
|
|
treeDropdown: {
|
|
targetBg: "#090707",
|
|
targetIcon: {
|
|
normal: "#9F9F9F",
|
|
hover: "#9F9F9F",
|
|
},
|
|
menuShadow: "0px 12px 28px -8px rgba(0, 0, 0, 0.75)",
|
|
menuBg: {
|
|
normal: darkShades[3],
|
|
hover: darkShades[4],
|
|
selected: darkShades[4],
|
|
},
|
|
menuText: {
|
|
normal: darkShades[7],
|
|
hover: darkShades[9],
|
|
selected: darkShades[7],
|
|
},
|
|
},
|
|
propertyPane: {
|
|
title: darkShades[11],
|
|
bg: darkShades[1],
|
|
label: darkShades[7],
|
|
jsIconBg: darkShades[5],
|
|
buttonBg: darkShades[7],
|
|
buttonText: lightShades[10],
|
|
radioGroupBg: darkShades[0],
|
|
radioGroupText: darkShades[7],
|
|
deleteIconColor: "#A3B3BF",
|
|
zoomButtonBG: darkShades[3],
|
|
activeButtonText: lightShades[12],
|
|
jsButtonHoverBG: darkShades[2],
|
|
dropdownSelectBg: darkShades[2],
|
|
multiDropdownBoxHoverBg: darkShades[0],
|
|
iconColor: darkShades[5],
|
|
ctaTextColor: "#202223",
|
|
ctaBackgroundColor: "rgb(248, 106, 43, 0.1)",
|
|
ctaLearnMoreTextColor: "#f86a2b",
|
|
connections: {
|
|
error: "#f22b2b",
|
|
connectionsCount: darkShades[11],
|
|
optionBg: "rgba(246,71,71, 0.2)",
|
|
},
|
|
},
|
|
scrollbar: getColorWithOpacity(Colors.LIGHT_GREY, 0.5),
|
|
scrollbarBG: getColorWithOpacity(Colors.CODE_GRAY, 0.5),
|
|
debugger: {
|
|
background: darkShades[11],
|
|
messageTextColor: "#D4D4D4",
|
|
label: "#D4D4D4",
|
|
entity: "rgba(212, 212, 212, 0.5)",
|
|
entityLink: "#D4D4D4",
|
|
jsonIcon: "#9F9F9F",
|
|
collapseIcon: lightShades[20],
|
|
message: "#D4D4D4",
|
|
evalDebugButton: {
|
|
hover: "#fafafaaa",
|
|
active: "#fafafaff",
|
|
},
|
|
floatingButton: {
|
|
background: "#2b2b2b",
|
|
color: "#d4d4d4",
|
|
shadow: "0px 12px 28px -6px rgba(0, 0, 0, 0.32)",
|
|
errorCount: "#F22B2B",
|
|
noErrorCount: "#03B365",
|
|
warningCount: "#DCAD00",
|
|
},
|
|
inspectElement: {
|
|
color: "#D4D4D4",
|
|
},
|
|
blankState: {
|
|
color: "#D4D4D4",
|
|
shortcut: "#D4D4D4",
|
|
},
|
|
info: {
|
|
time: Colors.GRAY_500,
|
|
borderBottom: "black",
|
|
},
|
|
warning: {
|
|
time: Colors.GRAY_500,
|
|
iconColor: "#f3cc3e",
|
|
hoverIconColor: "#e0b30e",
|
|
borderBottom: "black",
|
|
backgroundColor: "#29251A",
|
|
},
|
|
error: {
|
|
time: Colors.GRAY_500,
|
|
type: "#393939",
|
|
iconColor: "#f56060",
|
|
hoverIconColor: "#F22B2B",
|
|
borderBottom: "black",
|
|
backgroundColor: "#291B1D",
|
|
},
|
|
},
|
|
guidedTour,
|
|
widgetGroupingContextMenu: {
|
|
border: "#69b5ff",
|
|
actionActiveBg: "#e1e1e1",
|
|
},
|
|
actionSidePane,
|
|
link: "#f86a2b",
|
|
welcomePage: {
|
|
text: lightShades[5],
|
|
},
|
|
settings: {
|
|
link: "#716E6E",
|
|
},
|
|
};
|
|
|
|
export const light: ColorType = {
|
|
editorBottomBar,
|
|
gitSyncModal,
|
|
numberedStep,
|
|
tabItemBackgroundFill,
|
|
overlayColor: "#090707cc",
|
|
displayImageUpload,
|
|
showcaseCarousel,
|
|
mentionSuggestion,
|
|
reactionsComponent,
|
|
toggleMode,
|
|
helpModal: {
|
|
itemHighlight: "#EBEBEB",
|
|
background: "#FFFFFF",
|
|
},
|
|
globalSearch: {
|
|
...globalSearch,
|
|
helpBarBackground: "#F0F0F0",
|
|
helpBarText: Colors.GRAY_400,
|
|
helpButtonBackground: "#F0F0F0",
|
|
helpIcon: Colors.GRAY_700,
|
|
},
|
|
navigationMenu: {
|
|
contentActive: "#090707",
|
|
backgroundActive: "#EBEBEB",
|
|
contentInactive: "#4B4848",
|
|
backgroundInactive: "#FFFFFF",
|
|
label: "#A9A7A7",
|
|
warning: "#F22B2B",
|
|
warningBackground: "#FFFFFF",
|
|
},
|
|
selected: lightShades[12],
|
|
header: {
|
|
separator: "#E0DEDE",
|
|
appName: lightShades[8],
|
|
background: lightShades[11],
|
|
deployToolTipText: lightShades[8],
|
|
deployToolTipBackground: "#FFF",
|
|
shareBtnHighlight: "#F86A2B",
|
|
shareBtn: "#4B4848",
|
|
tabsHorizontalSeparator: "#EFEFEF",
|
|
tabText: "#6F6D6D",
|
|
activeTabBorderBottom: "#FF6D2D",
|
|
activeTabText: "#000",
|
|
},
|
|
button: {
|
|
disabledText: lightShades[15],
|
|
boxShadow: {
|
|
default: {
|
|
variant1: Colors.BOX_SHADOW_DEFAULT_VARIANT1,
|
|
variant2: Colors.BOX_SHADOW_DEFAULT_VARIANT2,
|
|
variant3: Colors.BOX_SHADOW_DEFAULT_VARIANT3,
|
|
variant4: Colors.BOX_SHADOW_DEFAULT_VARIANT4,
|
|
variant5: Colors.BOX_SHADOW_DEFAULT_VARIANT5,
|
|
},
|
|
},
|
|
disabled: {
|
|
bgColor: Colors.GREY_1,
|
|
textColor: Colors.GREY_8,
|
|
},
|
|
primary: {
|
|
primary: {
|
|
bgColor: Colors.GREEN,
|
|
hoverColor: Colors.PRIMARY_SOLID_HOVER,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.GREEN,
|
|
hoverColor: Colors.PRIMARY_OUTLINE_HOVER,
|
|
textColor: Colors.GREEN,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.PRIMARY_GHOST_HOVER,
|
|
},
|
|
},
|
|
warning: {
|
|
primary: {
|
|
bgColor: Colors.WARNING_SOLID,
|
|
hoverColor: Colors.WARNING_SOLID_HOVER,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.WARNING_SOLID,
|
|
hoverColor: Colors.WARNING_OUTLINE_HOVER,
|
|
textColor: Colors.WARNING_SOLID,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.WARNING_GHOST_HOVER,
|
|
},
|
|
},
|
|
danger: {
|
|
primary: {
|
|
bgColor: Colors.DANGER_SOLID,
|
|
hoverColor: Colors.DANGER_SOLID_HOVER,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.DANGER_SOLID,
|
|
hoverColor: Colors.DANGER_NO_SOLID_HOVER,
|
|
textColor: Colors.DANGER_SOLID,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.DANGER_NO_SOLID_HOVER,
|
|
},
|
|
},
|
|
info: {
|
|
primary: {
|
|
bgColor: Colors.INFO_SOLID,
|
|
hoverColor: Colors.INFO_SOLID_HOVER,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.INFO_SOLID,
|
|
hoverColor: Colors.INFO_NO_SOLID_HOVER,
|
|
textColor: Colors.INFO_SOLID,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.INFO_NO_SOLID_HOVER,
|
|
},
|
|
},
|
|
secondary: {
|
|
primary: {
|
|
bgColor: Colors.GRAY,
|
|
hoverColor: Colors.CHARCOAL,
|
|
textColor: Colors.WHITE,
|
|
},
|
|
secondary: {
|
|
borderColor: Colors.GRAY,
|
|
hoverColor: Colors.Gallery,
|
|
textColor: Colors.GRAY,
|
|
},
|
|
tertiary: {
|
|
hoverColor: Colors.MERCURY,
|
|
},
|
|
},
|
|
custom: {
|
|
solid: {
|
|
dark: {
|
|
textColor: Colors.CUSTOM_SOLID_DARK_TEXT_COLOR,
|
|
},
|
|
light: {
|
|
textColor: Colors.WHITE,
|
|
},
|
|
},
|
|
},
|
|
link: {
|
|
main: "#716E6E",
|
|
hover: "#090707",
|
|
active: "#4B4848",
|
|
disabled: "#858282",
|
|
},
|
|
},
|
|
tertiary: {
|
|
main: "#606065",
|
|
light: "#090707",
|
|
dark: "#FAFAFA",
|
|
darker: "#EDEDED",
|
|
darkest: "#A9A7A7",
|
|
},
|
|
info: {
|
|
main: "#F86A2B",
|
|
light: "#DC5B21",
|
|
dark: "#BF4109",
|
|
darker: "#FEEDE5",
|
|
darkest: "#F7EBE6",
|
|
},
|
|
success: {
|
|
main: "#03B365",
|
|
light: "#007340",
|
|
dark: "#00693B",
|
|
darker: "#CBF4E2",
|
|
darkest: "#D9FDED",
|
|
},
|
|
warning: {
|
|
main: "#FEB811",
|
|
light: "#EFA903",
|
|
dark: "#EFA903",
|
|
darker: "#FBEED0",
|
|
darkest: "#FFFAE9",
|
|
},
|
|
danger: {
|
|
main: "#F22B2B",
|
|
light: "#B90707",
|
|
dark: "#C60707",
|
|
darker: "#FDE4E4",
|
|
darkest: "#FFE9E9",
|
|
},
|
|
homepageBackground: "#ffffff",
|
|
card: {
|
|
hoverBG: Colors.WHITE,
|
|
hoverBGOpacity: 0.7,
|
|
hoverBorder: lightShades[2],
|
|
iconColor: lightShades[11],
|
|
},
|
|
text: {
|
|
normal: lightShades[8],
|
|
heading: lightShades[9],
|
|
highlight: lightShades[11],
|
|
},
|
|
icon: {
|
|
normal: lightShades[4],
|
|
hover: lightShades[8],
|
|
active: lightShades[9],
|
|
},
|
|
appIcon: {
|
|
normal: lightShades[7],
|
|
background: lightShades[1],
|
|
},
|
|
menu: {
|
|
background: lightShades[11],
|
|
shadow: "rgba(0, 0, 0, 0.32)",
|
|
},
|
|
menuItem: {
|
|
normalText: lightShades[8],
|
|
normalIcon: lightShades[6],
|
|
hoverIcon: lightShades[8],
|
|
hoverText: lightShades[10],
|
|
hoverBg: lightShades[2],
|
|
warning: {
|
|
color: "#D2A500",
|
|
bg: "#FDFAF2",
|
|
},
|
|
},
|
|
colorSelector: {
|
|
shadow: lightShades[3],
|
|
checkmark: lightShades[16],
|
|
},
|
|
checkbox: {
|
|
disabled: lightShades[3],
|
|
unchecked: lightShades[5],
|
|
disabledCheck: lightShades[6],
|
|
normalCheck: lightShades[11],
|
|
labelColor: lightShades[9],
|
|
},
|
|
dropdown: {
|
|
header: {
|
|
text: lightShades[8],
|
|
disabledText: darkShades[6],
|
|
defaultBg: lightShades[11],
|
|
bg: lightShades[14],
|
|
disabledBg: lightShades[1],
|
|
},
|
|
menu: {
|
|
border: lightShades[13],
|
|
bg: lightShades[11],
|
|
text: lightShades[8],
|
|
hover: lightShades[21],
|
|
hoverText: lightShades[10],
|
|
subText: lightShades[15],
|
|
},
|
|
menuShadow: "0px 6px 20px rgba(0, 0, 0, 0.15)",
|
|
selected: {
|
|
text: lightShades[10],
|
|
bg: lightShades[14],
|
|
icon: lightShades[15],
|
|
subtext: lightShades[7],
|
|
},
|
|
hovered: {
|
|
text: lightShades[10],
|
|
bg: lightShades[14],
|
|
icon: lightShades[11],
|
|
},
|
|
icon: lightShades[7],
|
|
},
|
|
toggle: {
|
|
bg: lightShades[13],
|
|
hover: {
|
|
on: "#BF4109",
|
|
off: lightShades[5],
|
|
},
|
|
disable: {
|
|
on: "#FEEDE5",
|
|
off: lightShades[13],
|
|
},
|
|
disabledSlider: {
|
|
off: lightShades[11],
|
|
on: lightShades[11],
|
|
},
|
|
spinner: lightShades[5],
|
|
spinnerBg: lightShades[3],
|
|
},
|
|
textInput: {
|
|
disable: {
|
|
bg: lightShades[2],
|
|
text: darkShades[5],
|
|
border: lightShades[2],
|
|
},
|
|
normal: {
|
|
bg: lightShades[11],
|
|
text: lightShades[10],
|
|
border: lightShades[13],
|
|
},
|
|
placeholder: lightShades[5],
|
|
helper: lightShades[15],
|
|
icon: lightShades[7],
|
|
readOnly: {
|
|
bg: lightShades[2],
|
|
border: lightShades[2],
|
|
text: lightShades[7],
|
|
},
|
|
hover: {
|
|
bg: lightShades[0],
|
|
},
|
|
caretColor: Colors.BLACK,
|
|
},
|
|
menuBorder: lightShades[3],
|
|
editableText: {
|
|
color: lightShades[8],
|
|
bg: lightShades[2],
|
|
dangerBg: "rgba(242, 43, 43, 0.06)",
|
|
},
|
|
radio: {
|
|
disable: lightShades[4],
|
|
border: lightShades[3],
|
|
text: lightShades[10],
|
|
},
|
|
searchInput: {
|
|
placeholder: lightShades[6],
|
|
text: lightShades[10],
|
|
border: lightShades[13],
|
|
bg: lightShades[11],
|
|
icon: {
|
|
focused: lightShades[10],
|
|
normal: lightShades[7],
|
|
},
|
|
},
|
|
spinner: lightShades[6],
|
|
tableDropdown: {
|
|
bg: lightShades[11],
|
|
selectedBg: lightShades[2],
|
|
selectedText: lightShades[9],
|
|
shadow: "rgba(0, 0, 0, 0.32)",
|
|
},
|
|
tabs: {
|
|
normal: lightShades[15],
|
|
icon: lightShades[10],
|
|
hover: lightShades[8],
|
|
border: lightShades[3],
|
|
countBg: lightShades[3],
|
|
selected: Colors.CRUSTA,
|
|
},
|
|
settingHeading: lightShades[16],
|
|
table: {
|
|
headerBg: lightShades[1],
|
|
headerText: lightShades[6],
|
|
rowData: lightShades[7],
|
|
rowTitle: lightShades[9],
|
|
border: lightShades[3],
|
|
hover: {
|
|
headerColor: lightShades[9],
|
|
rowBg: lightShades[2],
|
|
rowTitle: lightShades[10],
|
|
rowData: lightShades[9],
|
|
},
|
|
},
|
|
applications: {
|
|
bg: lightShades[3],
|
|
textColor: lightShades[7],
|
|
workspaceColor: lightShades[7],
|
|
iconColor: lightShades[7],
|
|
hover: {
|
|
bg: lightShades[5],
|
|
textColor: lightShades[8],
|
|
workspaceColor: lightShades[9],
|
|
},
|
|
cardMenuIcon: lightShades[17],
|
|
},
|
|
switch: {
|
|
border: lightShades[5],
|
|
bg: lightShades[11],
|
|
hover: {
|
|
bg: lightShades[11],
|
|
},
|
|
lightText: lightShades[11],
|
|
darkText: lightShades[6],
|
|
},
|
|
queryTemplate: {
|
|
bg: lightShades[11],
|
|
color: lightShades[8],
|
|
},
|
|
profileDropdown: {
|
|
name: lightShades[10],
|
|
userName: lightShades[7],
|
|
},
|
|
modal: {
|
|
bg: lightShades[11],
|
|
headerText: lightShades[20],
|
|
iconColor: lightShades[5],
|
|
iconBg: lightShades[18],
|
|
user: {
|
|
textColor: lightShades[9],
|
|
},
|
|
email: {
|
|
message: lightShades[9],
|
|
desc: lightShades[7],
|
|
},
|
|
manageUser: lightShades[19],
|
|
scrollbar: lightShades[5],
|
|
separator: lightShades[4],
|
|
title: lightShades[8],
|
|
link: "#F86A2B",
|
|
hoverState: lightShades[3],
|
|
},
|
|
tagInput: {
|
|
bg: lightShades[11],
|
|
tag: {
|
|
text: lightShades[11],
|
|
},
|
|
text: lightShades[9],
|
|
placeholder: darkShades[7],
|
|
shadow: "none",
|
|
},
|
|
callout: {
|
|
info: {
|
|
color: "#D44100",
|
|
bgColor: "#F8F3F0",
|
|
},
|
|
success: {
|
|
color: "#03B365",
|
|
bgColor: "#E4F4ED",
|
|
},
|
|
danger: {
|
|
color: "#F22B2B",
|
|
bgColor: "#F9E9E9",
|
|
},
|
|
warning: {
|
|
color: "#FEB811",
|
|
bgColor: "#FAF3E3",
|
|
},
|
|
},
|
|
loader: {
|
|
light: lightShades[2],
|
|
dark: lightShades[4],
|
|
},
|
|
filePicker: {
|
|
bg: lightShades[2],
|
|
color: lightShades[7],
|
|
progress: lightShades[6],
|
|
shadow: {
|
|
from: "rgba(253, 253, 253, 0.0001)",
|
|
to: "rgba(250, 250, 250, 0.898847)",
|
|
},
|
|
},
|
|
formFooter: {
|
|
cancelBtn: lightShades[9],
|
|
},
|
|
toast: {
|
|
undo: "#F86A2B",
|
|
undoRedoColor: "#F8682B",
|
|
warningColor: "#DCAD00",
|
|
dangerColor: "#F22B2B",
|
|
textColor: "#F7F7F7",
|
|
bg: lightShades[10],
|
|
},
|
|
multiSwitch: {
|
|
bg: lightShades[3],
|
|
selectedBg: lightShades[11],
|
|
text: lightShades[8],
|
|
border: "#E0DEDE",
|
|
},
|
|
apiPane: {
|
|
bg: lightShades[11],
|
|
tabBg: lightShades[11],
|
|
text: lightShades[16],
|
|
keyValueText: lightShades[8],
|
|
dividerBg: lightShades[3],
|
|
iconHoverBg: lightShades[1],
|
|
requestTree: {
|
|
bg: lightShades[11],
|
|
header: {
|
|
text: lightShades[8],
|
|
icon: lightShades[8],
|
|
bg: lightShades[2],
|
|
},
|
|
row: {
|
|
hoverBg: lightShades[2],
|
|
key: lightShades[7],
|
|
value: lightShades[8],
|
|
},
|
|
},
|
|
closeIcon: lightShades[10],
|
|
responseBody: {
|
|
bg: lightShades[11],
|
|
},
|
|
codeEditor: {
|
|
placeholderColor: lightShades[15],
|
|
},
|
|
body: {
|
|
text: "#A9A7A7",
|
|
},
|
|
settings: {
|
|
textColor: lightShades[10],
|
|
},
|
|
pagination: {
|
|
label: lightShades[8],
|
|
description: lightShades[5],
|
|
stepTitle: lightShades[10],
|
|
numberBg: "#E0DEDE",
|
|
bindingBg: lightShades[3],
|
|
numberColor: lightShades[10],
|
|
},
|
|
},
|
|
codeMirror: {
|
|
background: {
|
|
defaultState: lightShades[0],
|
|
hoverState: lightShades[21],
|
|
},
|
|
text: "#090707",
|
|
dataType: {
|
|
shortForm: "#858282",
|
|
fullForm: "#6D6D6D",
|
|
},
|
|
},
|
|
floatingBtn: {
|
|
tagBackground: "#e22c2c",
|
|
backgroundColor: lightShades[0],
|
|
iconColor: lightShades[7],
|
|
borderColor: lightShades[14],
|
|
},
|
|
auth,
|
|
formMessage,
|
|
gif: {
|
|
overlay: "#ffffff",
|
|
text: "#6f6f6f",
|
|
iconPath: "#c4c4c4",
|
|
iconCircle: "#090707",
|
|
},
|
|
treeDropdown: {
|
|
targetBg: "#FFFFFF",
|
|
targetIcon: {
|
|
normal: "#939090",
|
|
hover: "#4B4848",
|
|
},
|
|
menuShadow:
|
|
"0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 10px rgba(0, 0, 0, 0.1)",
|
|
menuBg: {
|
|
normal: lightShades[0],
|
|
hover: lightShades[12],
|
|
selected: lightShades[3],
|
|
},
|
|
menuText: {
|
|
normal: lightShades[8],
|
|
hover: lightShades[0],
|
|
selected: lightShades[8],
|
|
},
|
|
},
|
|
propertyPane: {
|
|
title: darkShades[11],
|
|
bg: lightShades[2],
|
|
label: lightShades[8],
|
|
jsIconBg: lightShades[5],
|
|
buttonBg: lightShades[8],
|
|
buttonText: lightShades[11],
|
|
radioGroupBg: lightShades[0],
|
|
radioGroupText: lightShades[8],
|
|
deleteIconColor: "#A3B3BF",
|
|
zoomButtonBG: lightShades[13],
|
|
activeButtonText: lightShades[12],
|
|
jsButtonHoverBG: lightShades[2],
|
|
dropdownSelectBg: lightShades[14],
|
|
multiDropdownBoxHoverBg: lightShades[11],
|
|
iconColor: lightShades[5],
|
|
ctaTextColor: "#202223",
|
|
ctaBackgroundColor: "rgb(248, 106, 43, 0.1)",
|
|
ctaLearnMoreTextColor: "#f86a2b",
|
|
connections: {
|
|
error: "#f22b2b",
|
|
connectionsCount: darkShades[11],
|
|
optionBg: "rgba(246,71,71, 0.2)",
|
|
},
|
|
},
|
|
scrollbar: getColorWithOpacity(Colors.CHARCOAL, 0.5),
|
|
scrollbarBG: "transparent",
|
|
debugger: {
|
|
background: "#FFFFFF",
|
|
messageTextColor: "#716e6e",
|
|
label: "#575757",
|
|
entity: "rgba(75, 72, 72, 0.7)",
|
|
entityLink: "#575757",
|
|
jsonIcon: "#a9a7a7",
|
|
message: "#4b4848",
|
|
collapseIcon: lightShades[20],
|
|
evalDebugButton: {
|
|
hover: "#fafafaaa",
|
|
active: "#fafafaff",
|
|
},
|
|
floatingButton: {
|
|
background: "#2b2b2b",
|
|
color: "#d4d4d4",
|
|
shadow: "0px 12px 28px -6px rgba(0, 0, 0, 0.32)",
|
|
errorCount: "#F22B2B",
|
|
noErrorCount: "#03B365",
|
|
warningCount: "#DCAD00",
|
|
},
|
|
inspectElement: {
|
|
color: "#090707",
|
|
},
|
|
blankState: {
|
|
color: "#090707",
|
|
shortcut: "black",
|
|
},
|
|
info: {
|
|
time: Colors.GRAY_500,
|
|
borderBottom: "#E8E8E8",
|
|
},
|
|
warning: {
|
|
time: Colors.GRAY_500,
|
|
iconColor: "#f3cc3e",
|
|
hoverIconColor: "#e0b30e",
|
|
borderBottom: "#E8E8E8",
|
|
backgroundColor: "#FFF8E2",
|
|
},
|
|
error: {
|
|
time: Colors.GRAY_500,
|
|
type: "#393939",
|
|
iconColor: "#f56060",
|
|
hoverIconColor: "#F22B2B",
|
|
borderBottom: "#E8E8E8",
|
|
backgroundColor: "#F9E9E9",
|
|
},
|
|
},
|
|
guidedTour,
|
|
widgetGroupingContextMenu: {
|
|
border: "#69b5ff",
|
|
actionActiveBg: "#e1e1e1",
|
|
},
|
|
actionSidePane,
|
|
link: "#f86a2b",
|
|
welcomePage: {
|
|
text: lightShades[5],
|
|
},
|
|
settings: {
|
|
link: "#716E6E",
|
|
},
|
|
};
|
|
|
|
export const theme: Theme = {
|
|
radii: [0, 4, 8, 10, 20, 50],
|
|
fontSizes: [0, 10, 12, 14, 16, 18, 24, 28, 32, 48, 64],
|
|
spaces: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 30, 36, 38, 40, 42, 44],
|
|
fontWeights: [0, 400, 500, 700],
|
|
typography: typography,
|
|
iconSizes: iconSizes,
|
|
propertyPane: {
|
|
width: 270,
|
|
titleHeight: 40,
|
|
connectionsHeight: 30,
|
|
height: 600,
|
|
dividerColor: Colors.MAKO,
|
|
},
|
|
evaluatedValuePopup: {
|
|
width: 300,
|
|
height: 500,
|
|
},
|
|
drawerWidth: "80%",
|
|
colors: {
|
|
tooltip: {
|
|
lightBg: lightShades[0],
|
|
lightText: lightShades[10],
|
|
darkBg: lightShades[10],
|
|
darkText: lightShades[0],
|
|
},
|
|
appBackground: "#EDEDED",
|
|
artboard: "#F8FAFC",
|
|
primaryOld: Colors.GREEN,
|
|
primaryDarker: Colors.JUNGLE_GREEN,
|
|
primaryDarkest: Colors.JUNGLE_GREEN_DARKER,
|
|
secondary: Colors.GEYSER_LIGHT,
|
|
secondaryDarker: Colors.CONCRETE,
|
|
secondaryDarkest: Colors.MERCURY,
|
|
error: Colors.ERROR_RED,
|
|
infoOld: Colors.SLATE_GRAY,
|
|
errorMessage: Colors.ERROR_RED,
|
|
hover: Colors.POLAR,
|
|
inputActiveBorder: Colors.HIT_GRAY,
|
|
inputInactiveBG: Colors.AQUA_HAZE,
|
|
textDefault: Colors.BLACK_PEARL,
|
|
textOnDarkBG: Colors.WHITE,
|
|
textOnGreyBG: Colors.CHARCOAL,
|
|
textOnWhiteBG: Colors.CODE_GRAY,
|
|
textAnchor: Colors.PURPLE,
|
|
border: Colors.GEYSER,
|
|
paneCard: Colors.SHARK,
|
|
paneInputBG: Colors.SHARK,
|
|
paneBG: Colors.OUTER_SPACE,
|
|
paneText: Colors.GRAY_CHATEAU,
|
|
paneTextBG: Colors.DEEP_SPACE,
|
|
paneTextUnderline: Colors.LIGHT_GREYISH_BLUE,
|
|
paneSectionLabel: Colors.CADET_BLUE,
|
|
navBG: Colors.SHARK,
|
|
grid: Colors.ALTO2,
|
|
containerBorder: Colors.FRENCH_PASS,
|
|
menuButtonBGInactive: Colors.JUNGLE_MIST,
|
|
menuIconColorInactive: Colors.OXFORD_BLUE,
|
|
bodyBG: Colors.ATHENS_GRAY,
|
|
builderBodyBG: Colors.WHITE,
|
|
widgetMultiSelectBorder: Colors.MALIBU,
|
|
widgetBorder: Colors.SLATE_GRAY,
|
|
widgetLightBorder: Colors.WHITE_SMOKE,
|
|
widgetSecondaryBorder: Colors.MERCURY,
|
|
messageBG: Colors.CONCRETE,
|
|
paneIcon: Colors.TROUT,
|
|
bindingTextDark: Colors.BINDING_COLOR,
|
|
bindingText: Colors.BINDING_COLOR_LT,
|
|
cmBacground: Colors.BLUE_CHARCOAL,
|
|
lightningborder: Colors.ALABASTER,
|
|
formButtonColor: Colors.WHITE,
|
|
appCardColors: appColors,
|
|
dataTypeBg: {
|
|
function: "#BDB2FF",
|
|
object: "#FFD6A5",
|
|
unknown: "#4bb",
|
|
array: "#CDFFA5",
|
|
number: "#FFB2B2",
|
|
},
|
|
scrollbarLight: getColorWithOpacity(Colors.CHARCOAL, 0.5),
|
|
scrollbarLightBG: getColorWithOpacity(Colors.WHITE, 0.5),
|
|
scrollbarDark: getColorWithOpacity(Colors.LIGHT_GREY, 0.5),
|
|
scrollbarDarkBG: getColorWithOpacity(Colors.CODE_GRAY, 0.5),
|
|
dropdownIconBg: Colors.ALTO2,
|
|
welcomeTourStickySidebarColor: Colors.WHITE,
|
|
welcomeTourStickySidebarBackground: "#F86A2B",
|
|
dropdownIconDarkBg: Colors.DARK_GRAY,
|
|
dropdownGreyBg: Colors.Gallery,
|
|
},
|
|
|
|
lineHeights: [0, 14, 16, 18, 22, 24, 28, 36, 48, 64, 80],
|
|
fonts: {
|
|
text: FontFamilies.TextFonts,
|
|
code: FontFamilies.CodeFonts,
|
|
},
|
|
borders: [
|
|
{
|
|
thickness: 1,
|
|
style: "dashed",
|
|
color: Colors.FRENCH_PASS,
|
|
},
|
|
{
|
|
thickness: 2,
|
|
style: "solid",
|
|
color: Colors.FRENCH_PASS,
|
|
},
|
|
{
|
|
thickness: 1,
|
|
style: "solid",
|
|
color: Colors.GEYSER_LIGHT,
|
|
},
|
|
{
|
|
thickness: 1,
|
|
style: "solid",
|
|
color: Colors.FRENCH_PASS,
|
|
},
|
|
{
|
|
thickness: 3,
|
|
style: "solid",
|
|
color: Colors.MYSTIC,
|
|
},
|
|
],
|
|
sidebarWidth: "256px",
|
|
homePage: {
|
|
header: 48,
|
|
leftPane: {
|
|
width: 256,
|
|
leftPadding: 16,
|
|
rightMargin: 12,
|
|
},
|
|
main: {
|
|
marginLeft: 112,
|
|
},
|
|
search: {
|
|
height: 81,
|
|
paddingTop: 30,
|
|
},
|
|
sidebar: 256,
|
|
},
|
|
headerHeight: "48px",
|
|
smallHeaderHeight: "40px",
|
|
bottomBarHeight: "37px",
|
|
pageTabsHeight: "32px",
|
|
integrationsPageUnusableHeight: "182px",
|
|
backBanner: "30px",
|
|
canvasBottomPadding: 200,
|
|
navbarMenuHeight: "35px",
|
|
navbarMenuLineHeight: "25px",
|
|
sideNav: {
|
|
maxWidth: 220,
|
|
minWidth: 50,
|
|
bgColor: Colors.OXFORD_BLUE,
|
|
fontColor: Colors.WHITE,
|
|
activeItemBGColor: Colors.SHARK,
|
|
navItemHeight: 42,
|
|
},
|
|
card: {
|
|
minWidth: 228,
|
|
minHeight: 124,
|
|
titleHeight: 48,
|
|
divider: {
|
|
thickness: 1,
|
|
style: "solid",
|
|
color: Colors.GEYSER_LIGHT,
|
|
},
|
|
},
|
|
dropdown: {
|
|
[Skin.LIGHT]: {
|
|
hoverBG: lightShades[2],
|
|
hoverText: lightShades[10],
|
|
inActiveBG: lightShades[2],
|
|
inActiveText: lightShades[10],
|
|
border: Colors.WHITE,
|
|
background: Colors.WHITE,
|
|
},
|
|
[Skin.DARK]: {
|
|
hoverBG: darkShades[0],
|
|
hoverText: darkShades[9],
|
|
inActiveBG: darkShades[2],
|
|
inActiveText: darkShades[7],
|
|
border: Colors.TROUT_DARK,
|
|
background: darkShades[4],
|
|
},
|
|
},
|
|
authCard: {
|
|
width: 440,
|
|
dividerSpacing: 32,
|
|
formMessageWidth: 370,
|
|
},
|
|
shadows: [
|
|
/* 0. tab */
|
|
`inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 4px 0px ${Colors.GREEN}`,
|
|
/* 1. first tab */
|
|
`inset -1px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 0px 0px ${Colors.ATHENS_GRAY}, inset 0px 4px 0px ${Colors.GREEN}`,
|
|
/* 2. container */
|
|
`0 1px 1px 0 rgba(60,75,100,.14) ,0 2px 1px -1px rgba(60,75,100,.12), 0 1px 3px 0 rgba(60,75,100,.2)`,
|
|
],
|
|
widgets: {
|
|
tableWidget: {
|
|
selectHighlightColor: Colors.GEYSER_LIGHT,
|
|
},
|
|
},
|
|
pageContentWidth: 1224,
|
|
tabPanelHeight: 34,
|
|
alert: {
|
|
info: {
|
|
color: Colors.AZURE_RADIANCE,
|
|
},
|
|
success: {
|
|
color: Colors.OCEAN_GREEN,
|
|
},
|
|
error: {
|
|
color: Colors.ERROR_RED,
|
|
},
|
|
warning: {
|
|
color: Colors.BUTTER_CUP,
|
|
},
|
|
},
|
|
lightningMenu: {
|
|
[Skin.DARK]: {
|
|
default: {
|
|
color: darkShades[7],
|
|
background: "transparent",
|
|
},
|
|
active: {
|
|
color: darkShades[9],
|
|
background: dark.info.main,
|
|
},
|
|
hover: {
|
|
color: darkShades[9],
|
|
background: darkShades[7],
|
|
},
|
|
none: {
|
|
color: "transparent",
|
|
background: "transparent",
|
|
},
|
|
},
|
|
[Skin.LIGHT]: {
|
|
default: {
|
|
color: lightShades[7],
|
|
background: "transparent",
|
|
},
|
|
active: {
|
|
color: lightShades[11],
|
|
background: dark.info.light,
|
|
},
|
|
hover: {
|
|
color: lightShades[11],
|
|
background: lightShades[7],
|
|
},
|
|
none: {
|
|
color: "transparent",
|
|
background: "transparent",
|
|
},
|
|
},
|
|
},
|
|
actionSidePane: {
|
|
width: 280,
|
|
},
|
|
onboarding: {
|
|
statusBarHeight: 92,
|
|
},
|
|
settings: {
|
|
footerHeight: 84,
|
|
footerShadow: "0px 0px 18px -6px rgb(0, 0, 0, 0.25)",
|
|
linkBg: lightShades[2],
|
|
},
|
|
};
|