Variable designTokensConst
designTokens: {
colors: {
primary: {
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
secondary: {
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
neutral: {
"100": string;
"300": string;
"500": string;
"700": string;
"900": string;
};
success: string;
error: string;
warning: string;
info: string;
};
typography: {
fontFamily: { primary: string; monospace: string };
fontSize: {
xs: string;
sm: string;
base: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
"5xl": string;
};
fontWeight: {
regular: number;
medium: number;
semibold: number;
bold: number;
};
};
spacing: {
"1": string;
"2": string;
"3": string;
"4": string;
"5": string;
"6": string;
"8": string;
"10": string;
"12": string;
};
borderRadius: { sm: string; DEFAULT: string; lg: string };
shadows: { sm: string; DEFAULT: string; md: string; lg: string };
} = ...
Type declaration
colors: {
primary: {
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
secondary: {
"50": string;
"100": string;
"200": string;
"300": string;
"400": string;
"500": string;
"600": string;
"700": string;
"800": string;
"900": string;
};
neutral: {
"100": string;
"300": string;
"500": string;
"700": string;
"900": string;
};
success: string;
error: string;
warning: string;
info: string;
}
typography: {
fontFamily: { primary: string; monospace: string };
fontSize: {
xs: string;
sm: string;
base: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
"5xl": string;
};
fontWeight: {
regular: number;
medium: number;
semibold: number;
bold: number;
};
}
spacing: {
"1": string;
"2": string;
"3": string;
"4": string;
"5": string;
"6": string;
"8": string;
"10": string;
"12": string;
}
borderRadius: { sm: string; DEFAULT: string; lg: string }
shadows: { sm: string; DEFAULT: string; md: string; lg: string }
Design Tokens Utilities for Backend
This module provides utilities to work with the design tokens from the frontend-shared package in the backend context, particularly for generating CSS styles for documentation pages.