@anpdgovbr/shared-ui
Version:
Biblioteca de componentes React com MUI v7 e padrão GovBR-ds para ANPD
134 lines • 4.4 kB
TypeScript
/**
* Tokens de superfície do GovBR Design System
*
* Define propriedades de superfície como larguras de borda, raios de arredondamento,
* opacidades, blur effects e offsets baseados no design system oficial.
*
* @security Todos os valores são readonly para prevenir mutação acidental
* @resilience Tipos exportados garantem type safety em componentes
*/
/**
* Larguras de borda padronizadas
* @readonly Valores fixos para consistência visual
*/
export declare const surfaceWidths: {
readonly sm: "1px";
readonly md: "2px";
readonly lg: "4px";
readonly xl: "8px";
};
/**
* Raios de arredondamento padronizados
*/
export declare const surfaceRounders: {
readonly sm: "4px";
readonly md: "8px";
readonly lg: "16px";
readonly xl: "24px";
readonly pill: "100em";
readonly circle: "50%";
};
/**
* Opacidades padronizadas para estados e overlays
*/
export declare const surfaceOpacities: {
readonly xs: 0.05;
readonly sm: 0.1;
readonly md: 0.2;
readonly lg: 0.4;
readonly xl: 0.8;
readonly full: 1;
};
/**
* Efeitos de blur padronizados
*/
export declare const surfaceBlurs: {
readonly sm: "4px";
readonly md: "8px";
readonly lg: "16px";
readonly xl: "32px";
};
/**
* Offsets para sombras e outros efeitos
*/
export declare const surfaceOffsets: {
readonly none: "0";
readonly xs: "1px";
readonly sm: "2px";
readonly md: "4px";
readonly lg: "8px";
readonly xl: "16px";
};
/**
* Tokens CSS de superfície compilados
*
* Estes são os tokens CSS variables que serão disponibilizados
* globalmente no tema para uso em componentes.
*/
export declare const surfaceTokens: {
readonly '--surface-width-sm': "1px";
readonly '--surface-width-md': "2px";
readonly '--surface-width-lg': "4px";
readonly '--surface-width-xl': "8px";
readonly '--surface-rounder-sm': "4px";
readonly '--surface-rounder-md': "8px";
readonly '--surface-rounder-lg': "16px";
readonly '--surface-rounder-xl': "24px";
readonly '--surface-rounder-pill': "100em";
readonly '--surface-rounder-circle': "50%";
readonly '--surface-opacity-xs': 0.05;
readonly '--surface-opacity-sm': 0.1;
readonly '--surface-opacity-md': 0.2;
readonly '--surface-opacity-lg': 0.4;
readonly '--surface-opacity-xl': 0.8;
readonly '--surface-opacity-full': 1;
readonly '--surface-blur-sm': "4px";
readonly '--surface-blur-md': "8px";
readonly '--surface-blur-lg': "16px";
readonly '--surface-blur-xl': "32px";
readonly '--surface-offset-none': "0";
readonly '--surface-offset-xs': "1px";
readonly '--surface-offset-sm': "2px";
readonly '--surface-offset-md': "4px";
readonly '--surface-offset-lg': "8px";
readonly '--surface-offset-xl': "16px";
};
/**
* Mapas semânticos para uso específico em componentes
*/
export declare const surfaceMaps: {
readonly border: {
readonly default: "var(--surface-width-sm, 1px)";
readonly focus: "var(--surface-width-md, 2px)";
readonly active: "var(--surface-width-lg, 4px)";
};
readonly radius: {
readonly button: "var(--surface-rounder-pill, 100em)";
readonly card: "var(--surface-rounder-md, 8px)";
readonly input: "var(--surface-rounder-md, 8px)";
readonly modal: "var(--surface-rounder-lg, 16px)";
readonly avatar: "var(--surface-rounder-circle, 50%)";
};
readonly state: {
readonly hover: "var(--surface-opacity-xs, 0.05)";
readonly pressed: "var(--surface-opacity-md, 0.2)";
readonly disabled: "var(--surface-opacity-lg, 0.4)";
readonly overlay: "var(--surface-opacity-xl, 0.8)";
};
readonly elevation: {
readonly focus: {
readonly offset: "var(--surface-offset-sm, 2px)";
readonly blur: "var(--surface-blur-md, 8px)";
};
readonly dropdown: {
readonly offset: "var(--surface-offset-lg, 8px)";
readonly blur: "var(--surface-blur-lg, 16px)";
};
};
};
export type SurfaceWidth = keyof typeof surfaceWidths;
export type SurfaceRounder = keyof typeof surfaceRounders;
export type SurfaceOpacity = keyof typeof surfaceOpacities;
export type SurfaceBlur = keyof typeof surfaceBlurs;
export type SurfaceOffset = keyof typeof surfaceOffsets;
//# sourceMappingURL=surface.d.ts.map