@anpdgovbr/shared-ui
Version:
Biblioteca de componentes React com MUI v7 e padrão GovBR-ds para ANPD
106 lines • 2.65 kB
TypeScript
/**
* Sombras baseadas nos tokens do GovBR Design System
*
* @security Fallbacks robustos previnem erros de runtime
* @resilience Níveis de elevação padronizados para hierarquia visual consistente
*
* Referência: @govbr-ds/core/dist/core-tokens.min.css
*
* Tokens mapeados:
* - --shadow-* (níveis de elevação e sombras)
* - --shadow-color-* (cores das sombras)
*/
/**
* Sombras do GovBR-DS organizadas por nível de elevação
* Seguem a especificação Material Design adaptada para o Gov.br
*
* Todos os valores incluem fallbacks seguros para evitar erros de runtime
*/
export declare const shadows: readonly string[];
/**
* Sombras contextuais organizadas por função de uso
* Facilitam a aplicação semântica das sombras nos componentes
*/
export declare const contextualShadows: {
surface: {
paper: string;
raised: string;
floating: string;
};
interactive: {
button: {
rest: string;
hover: string;
pressed: string;
};
fab: {
rest: string;
hover: string;
pressed: string;
};
};
navigation: {
appBar: string;
drawer: string;
bottomNav: string;
};
modal: {
dialog: string;
popover: string;
tooltip: string;
menu: string;
};
form: {
input: string;
inputFocus: string;
dropdown: string;
};
inset: string;
outline: string;
disabled: string;
error: string;
success: string;
warning: string;
};
/**
* Cores das sombras baseadas nos tokens GovBR
* Permitem customização da cor da sombra sem alterar a elevação
*/
export declare const shadowColors: {
base: string;
light: string;
dark: string;
colored: {
primary: string;
success: string;
warning: string;
error: string;
};
};
/**
* Criador de sombras customizadas
* Permite criar sombras com cor e opacidade específicas usando color-mix
*/
export declare const createShadow: (x: number, y: number, blur: number, spread?: number, color?: string, opacity?: number) => string;
/**
* Utilitários para sombras responsivas
* Permite ajustar sombras baseado no breakpoint
*/
export declare const responsiveShadows: {
mobile: {
subtle: string;
moderate: string;
strong: string;
};
tablet: {
subtle: string;
moderate: string;
strong: string;
};
desktop: {
subtle: string;
moderate: string;
strong: string;
};
};
//# sourceMappingURL=shadows.d.ts.map