135 lines
2.7 KiB
TypeScript
135 lines
2.7 KiB
TypeScript
import { invert } from "lodash";
|
|
|
|
/**
|
|
* mapping of tailwind colors
|
|
*
|
|
* NOTE: these are used in colorpicker
|
|
*/
|
|
export interface TailwindColors {
|
|
[key: string]: {
|
|
[key: string]: string;
|
|
};
|
|
}
|
|
|
|
export const TAILWIND_COLORS: TailwindColors = {
|
|
gray: {
|
|
100: "#f4f4f5",
|
|
300: "#d4d4d8",
|
|
500: "#71717a",
|
|
700: "#3f3f46",
|
|
900: "#18181b",
|
|
},
|
|
red: {
|
|
100: "#fee2e2",
|
|
300: "#fca5a5",
|
|
500: "#ef4444",
|
|
700: "#b91c1c",
|
|
900: "#7f1d1d",
|
|
},
|
|
|
|
yellow: {
|
|
100: "#fef9c3",
|
|
300: "#fde047",
|
|
500: "#eab308",
|
|
700: "#a16207",
|
|
900: "#713f12",
|
|
},
|
|
|
|
green: {
|
|
100: "#dcfce7",
|
|
300: "#86efac",
|
|
500: "#22c55e",
|
|
700: "#15803d",
|
|
900: "#14532d",
|
|
},
|
|
blue: {
|
|
100: "#dbeafe",
|
|
300: "#93c5fd",
|
|
500: "#3b82f6",
|
|
700: "#1d4ed8",
|
|
900: "#1e3a8a",
|
|
},
|
|
purple: {
|
|
100: "#f3e8ff",
|
|
300: "#d8b4fe",
|
|
500: "#a855f7",
|
|
700: "#7e22ce",
|
|
900: "#581c87",
|
|
},
|
|
pink: {
|
|
100: "#fce7f3",
|
|
300: "#f9a8d4",
|
|
500: "#ec4899",
|
|
700: "#be185d",
|
|
900: "#831843",
|
|
},
|
|
};
|
|
|
|
export const bindingPrefix = "appsmith.theme";
|
|
|
|
export const getThemePropertyBinding = (property: string) =>
|
|
`{{${bindingPrefix}.${property}}}`;
|
|
|
|
export const borderRadiusPropertyName = "borderRadius";
|
|
|
|
/**
|
|
* border radius options to be shown in property pane
|
|
*/
|
|
export const borderRadiusOptions: Record<string, string> = {
|
|
none: "0px",
|
|
M: "0.375rem",
|
|
L: "1.5rem",
|
|
};
|
|
|
|
export const invertedBorderRadiusOptions: Record<string, string> =
|
|
invert(borderRadiusOptions);
|
|
|
|
export const boxShadowPropertyName = "boxShadow";
|
|
|
|
/**
|
|
* box shadow options to be shown in property pane
|
|
*/
|
|
export const boxShadowOptions: Record<string, string> = {
|
|
none: "none",
|
|
S: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
|
|
M: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
|
L: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
|
|
};
|
|
|
|
/**
|
|
* box shadow size mapping for the size name to displayed in property pane
|
|
*/
|
|
export const sizeMappings: Record<string, string> = {
|
|
S: "Small",
|
|
M: "Medium",
|
|
L: "Large",
|
|
};
|
|
|
|
export const invertedBoxShadowOptions: Record<string, string> =
|
|
invert(boxShadowOptions);
|
|
|
|
export const colorsPropertyName = "colors";
|
|
|
|
// Text sizes in theming
|
|
export const THEMEING_TEXT_SIZES = {
|
|
xs: "0.75rem",
|
|
sm: "0.875rem",
|
|
base: "1rem",
|
|
md: "1.125rem",
|
|
lg: "1.5rem",
|
|
xl: "1.875rem",
|
|
"2xl": "3rem",
|
|
"3xl": "3.75rem",
|
|
};
|
|
// Text sizes type
|
|
export type ThemingTextSizes = keyof typeof THEMEING_TEXT_SIZES;
|
|
|
|
// Theming borderRadius:
|
|
export const THEMING_BORDER_RADIUS = {
|
|
none: "0px",
|
|
rounded: "0.375rem",
|
|
circle: "9999px",
|
|
};
|
|
|
|
export const DEFAULT_BOXSHADOW = "none";
|