样式设置
webforJ 随附一套名为 DWC 的完整设计系统。它不仅仅是一个主题，更是一套结构化、可扩展的系统，用于规范应用的视觉语言。DWC 旨在帮助开发者和设计师快速、自信地创建一致且符合品牌形象的界面。
DWC 的核心是一组经过精心设计的 CSS 变量（设计令牌），涵盖颜色、排版、边框和间距等关键视觉元素。这些令牌是所有组件样式的基础构建块，让你只需少量操作即可进行全局自定义。
为了支持更高级的样式定制，webforJ 使用 CSS Shadow Parts，让你可以选择性地设置组件内部元素的样式，同时不破坏封装性。这样一来，即使在大型应用中，团队也能精细控制组件的外观。
DWC 还包含可自定义的调色板，默认采用简洁的浅色视觉主题，但你可以根据品牌或产品风格调整各个方面。
The webforj-styling-apps skill can theme and style webforJ apps with DWC design tokens. After installing the webforJ AI plugin, ask your assistant:
- "Theme this app with a blue palette."
- "Style the dwc-button to match the brand guidelines."
- "Make this layout tighter - adjust spacing and typography."
Figma 设计套件
DWC 设计套件是用于设计 webforJ 应用的官方 Figma 资源。它涵盖了每个 DWC 组件及其主题、尺寸规格和状态，还包含设计系统的色板、排版、间距和阴影令牌，并以 Figma 变量和样式的形式提供浅色和深色模式。设计师和开发者可以使用该套件构建视觉一致、易于使用的界面，并确保组件行为可预测、间距精准、颜色对比度 符合无障碍要求。
主题
CSS 变量
Define, scope, and consume CSS custom properties to control webforJ component styling at runtime without preprocessors.
阴影部件
CSS 阴影部分 为开发人员提供了一种从外部样式化组件的阴影 DOM 中元素的方法，同时仍然保持封装。
主题
Apply built-in light, dark, and dark-pure themes with @AppTheme or define custom themes through data-app-theme selectors.
颜色
webforJ 提供了一个基于 CSS 自定义属性的颜色系统。这些颜色变量能够保持应用程序的视觉风格一致，同时让您能够根据设计需求完全控制调色板的自定义。
字体排印
排版令牌用于在您的应用程序中保持一致的字体样式集。
尺寸与间距
间距和尺寸代币用于在您的应用程序中提供一致的间距和尺寸。所有尺寸和间距属性以rem为单位定义。
边框
边框属性用于控制组件的边框样式和宽度。请参阅可用边框样式。
阴影
影子属性在元素框架周围添加阴影效果。阴影表示用户界面中层叠在一起的项目。
表面
DWC 定义了三个表面级别，用于组织 UI 层次结构，并结合 shadows。所有 palette colors 都经过测试，以确保与这些表面具有足够的对比度。
状态
状态令牌定义了组件如何在用户交互时进行视觉响应，例如在禁用或聚焦时。这些变量有助于确保所有 UI 元素的一致行为和样式，并且可以轻松自定义以匹配您的设计系 统。
过渡与缓动
Animate UI changes with consistent DWC duration tokens and cubic-bezier easing curves for natural-feeling transitions.
样式语言
Author your styles in CSS, compile them from Sass or Less, or generate them with Tailwind, and load the result into a webforJ app.
