阿戈拉设计系统
欢迎来到阿戈拉设计系统,即为gov.pt进化而创建的设计和开发系统,这个门户汇集了葡萄牙共和国的公共服务.
愿景
通过灵活和优秀的数字公共服务,使所有公民与国家的关系标准化、简化和更容易获得. 数字公共服务协会提出一套规则和准则,在葡萄牙国家设计和发展数字公共服务时必须遵守这些规则和准则.
目标
能够作为参考点的设计体系的构建和演变,为所有与葡萄牙国家与公民关系有关的数字公共服务服务提供参考.
核心技术
- 反应 - https://reactjs.org/ (中文(简体) )
- 故事书 - https://storybook.js.org/docs/react/get-started/install 页面存档备份,存于互联网档案馆
- 尾风 - https://tailwindcs.com/docs/安装
- 节点JS - https://nodejs.org/ 页面存档备份,存于互联网档案馆
有用链接
- 故事书 https://react.agora.gov.pt (英语)
- 图像( UX 设计) - https://www.figma.com/files/1280803067320724398/project/60863393 (中文(简体) )
- 零发 - https://zeroheight.com/1be481dc2/p/97181d-agora-design-system (中文(简体) )
- 访问监视器( Aessibilidade AMA) - https://accessmonitor.acessibilidade.gov.pt/ 互联网档案馆的存檔,存档日期2013-12-02
- W3 读取器 - https://validator.w3.org/nu/ (中文(简体) )
- Axe DevTools - 电动轴 电动轴 https://chrome.google.com/webstore/detaile/axe-devtools-web-accessib/lhdoppojpmngadnindnejefpokejd?utm source=deque.com&utm medicle=referral&utm campaign=axe hero 互联网档案馆的存檔,存档日期2013-12-27
安装
> npm install @ama-pt/agora-design-system
尾风 CSS v4 配置
AgoraDS 4 需要 Tailwind CSS v4. 配置 使用 正式安装指南,然后将这些导入添加到您的 CSS 主文件中,顺序为:
/* AgoraDS design tokens */
@import '@ama-pt/agora-design-system/theme.css';
/* Tailwind v4 reset and utilities */
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';
/* AgoraDS compiled component styles */
@import '@ama-pt/agora-design-system/index.css';
没有 tailwind.config 文档或 AgoraTailwindConfig 需要导入。 AgoraDS使用Tailwind v4的CSS-第一配置.
覆盖 AgoraDS 主题
以一个 @theme 输入后块。 例如,以下修改了主色调色板:
@import '@ama-pt/agora-design-system/theme.css';
@import 'tailwindcss/preflight';
@import 'tailwindcss/utilities';
@import '@ama-pt/agora-design-system/index.css';
@theme {
--color-primary-50: #fff000;
--color-primary-100: #fff000;
--color-primary-200: #fff000;
--color-primary-300: #fff000;
--color-primary-400: #fff000;
--color-primary-500: #fff000;
--color-primary-600: #fff000;
--color-primary-700: #fff000;
--color-primary-800: #fff000;
--color-primary-900: #fff000;
}
完整的设置和所有v3到v4的断开更改,请参见"故事书安装指南","尾风主题配置"和"迁移指南".